Hi Bamboo's

here's a new project, in which I started using the new Focus2

www.dieter.neu23.de/

I am wondering how the background images in the slideshow are being handled. They appear very big on my screen. The images seem to be resized from the center and become a little pixelated.

Can I do some adjustment to the resizing options somewhere?

I would like the slideshow images to become smaller when diminishing the width of the browserwindow, acting responsive.

best sebbie

Hi Sebbie,

You mean the background image stretches to fill the content space?

Cheers
Paul

Hey Paulus,

they seem to become larger when diminishing the browser size, shouldn't they become smaller?

best sebbie

Hi Sebbie,

I'll need to talk to Anthony about this one

Cheers
Paul

Great!

something else:

please help me with a slight transparency in navigation, dropdown and content.

best sebbie

Hi Sebbie,

What are you wanting to change transparency wise?

Cheers
Paul

Hi Paul

For these areas I would like to add the possibility for transparency



best sebbie

Hi Sebbie,

The navigation and the social area will need to be changed from hex colour values to rgba so

#menu {
background: rgba(115,115,115, 0.2);
}

.toolbar-fixed {background: rgba(115,115,115, 0.2);}

I've converted the current hex value in to its rgba value with the lst value being the alpha value (transparency)

This value goes from 0 to 1

For the drop down you would use the same rgba values as required but targeting the ul

#menu ul ul {}

Cheers
Paul

thx & allright so far

there still is the question, whether the slideshow could handle the background images in an opposite manner, scaling the size to become smaller and be visible better instead of making them bigger

I think this was targeted to anthony

best sebbie

You're welcome style wise

Yes I'll need to find out regarding Focus2 slideshow

Cheers
Paul

Hi Paul

the website is coming closer to launch day...

dieter.neu23.de

Have you had a chance to look at the background image behaviour?

I would like the pics to become smaller on mimizing the browser window

Best Sebbie

Hi Sebbie,

Apologies for the delay.

This is one of the limitations with using the backstretch slideshow. It's great for providing an overall feel but for images that require specific positioning you can get these odd results.

So I think the best option is to add some custom.css like the following to control it.

You may have to add a few increments in screen resolutions so you can control the position of the image precisely however this should do what you need.

Thanks

Hi Anthony

I have added this code to custom.css It seems to have an effect on the upper image behind the logo in content view.

www.dieter.neu23.de/seriendarsteller/adelheid-und-ihre-moerder.html


The background images on the first page / home are not being targeted.

www.dieter.neu23.de

Am I something missing?

best sebbie

Hmm yes - not entirely sure why it's not targetting there as well.

Try:
#zen-wrap .backstretch img{}

Thanks

Hi Anthony

it is still not targeting the images of the HOME page

I have made some ajustements with media queries for the logo, using h2 for main and h3 for sublin

Looks a lot better now on smaller devices

@media (min-width: 220px) and (max-width: 480px) {
#logo h2 {
color: #fff;
font-size: 1.5em;
line-height: 1.2em;
margin: 20px;
}
}

@media (min-width: 220px) and (max-width: 480px) {
#logo h3 {
color: #fff;
font-size: 1.0em;
line-height: 1.2em;
margin: 0;
}
}

@media (min-width: 480px) and (max-width: 600px) {
#logo h2 {
color: #fff;
font-size: 2.0em;
line-height: 1.2em;
margin: 20px;
}
}
@media (min-width: 480px) and (max-width: 600px) {
#logo h3 {
color: #fff;
font-size: 1.2em;
line-height: 1.2em;
margin: 0;
}
}

@media (min-width: 600px) and (max-width: 800px) {
#logo h2 {
color: #fff;
font-size: 2.8em;
line-height: 1.2em;
margin: 20px;
}
}
@media (min-width: 600px) and (max-width: 800px) {
#logo h3 {
color: #fff;
font-size: 1.6em;
line-height: 1.2em;
margin: 0;
}
}

Best sebbie

Hi Sebbie,

Are we ok on this one or is there still a problem?

Cheers
Paul

Hi Paul,

both of the codes anthony gave me, didn't target the background images for the content rows shown in this screen shot


slideshow

Seems as if therefore something else has to added

Best sebbie

Right ok

I'll check with Anthony tonight

Cheers
Paul

Hi Bamboo's

we are online now with this project:

www.dieterbrandecker.de

and still if you minimize the screen, the background images don't become smaller. This looks a bit odd on mobile screens.

Maybe you can have an other look into this matter.

best sebastian