SPECIAL OFFER: Only $59 for access to everything in OSTraining for 1 year! You save $85!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Display full background image

4 years 5 months ago - 4 years 5 months ago #108696 by Juc2
Display full background image was created by Juc2
Hi all,

Suppose I have a background image something like this : By default the background image will match the size of the content so if the amount of content is small then most of the background image will be hidden for example here .

Is there a way to say "display the full background image regardless of the content in the div" ie I am aiming for something like this .

I guess I could do it by just adding padding but that might need a very complicated media query ie trying to work out the padding required for all the different screen sizes - so is there a better way?

Thanks...

Please Log in to join the conversation.

4 years 5 months ago #108718 by Valentin
Replied by Valentin on topic Display full background image
Hi Juc2,

If your content is not bigger than your image, is possible achieve what you need by assigning a fixed with/height to your container (the same width of your background image)

Add CSS:
#example{
     width: 800px;
     height: 521px;
}

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 5 months ago #108730 by Juc2
Replied by Juc2 on topic Display full background image
Hi Valentin,

Thanks but I need it to be responsive to different screen sizes so I don't think pixels will work. Here is the star image using
.hundred-percent img {
width:100%;
height:auto;
}

So the image fills the width of the div (ie the page) and is responsive to different screen sizes. Can I get this result with a background image?

Here is the same image file as a background image. If I use pixels then the image is not responsive or needs a very complicated media query. Is there some equivalent of
width:100%;
height:auto;

Or maybe it is something like background-size:cover ?

Thanks...

Please Log in to join the conversation.

4 years 5 months ago #108742 by Valentin
Replied by Valentin on topic Display full background image
Hi Juc2,

Yes, you can have a responsive background. Use this property:
background-size: 100% auto;

This means, the image will use 100% of the screen width and the height will be proportional.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 5 months ago #108774 by Juc2
Replied by Juc2 on topic Display full background image

Valentin wrote: Hi Juc2,

Yes, you can have a responsive background. Use this property:

background-size: 100% auto;

This means, the image will use 100% of the screen width and the height will be proportional.

Kind regards,
Valentín


Hi Valentin,

I have added your code here but it seems to be the same problem ie I want the background star image to show but most of it is hidden.

Thanks...

Please Log in to join the conversation.

4 years 5 months ago - 4 years 5 months ago #108786 by Valentin
Replied by Valentin on topic Display full background image
You need to define a height value at least, ideally use the same from your image:
height: 600px;
width: 100%;

Be aware the height is static and can't be calculated based on the screensize unless you add media queries to change that value depending on the screensize. This post will be helpful to explain a little this suggestion, example:
@media (max-width: 960px) {
    // CSS here to change the height or other properties in screens with 960px maximum width
}
@media (max-width: 768px) {
    // CSS here to change the height or other properties in screens with 768px maximum width
}
@media (max-width: 480px) {
    // CSS here to change the height or other properties in screens with 480px maximum width
}

Hopes this clarification helps

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 4 months ago #109398 by Juc2
Replied by Juc2 on topic Display full background image
Hi Valentin,

OK but I don't want to use pixels because the media query based on pixels rather than percentage will be very complicated to cope with so many different screen sizes.

So just to recap - with an html image I can make the image fill the containing div with

.hundred-percent img {
width:100%;
height:auto;
}

ie 100% = I don't have to worry about specifying pixels.

So do you mean there is no way to get this result with a css background image ie a background image must specify pixels?

Thanks...

Please Log in to join the conversation.

4 years 4 months ago - 4 years 4 months ago #109428 by Valentin
Replied by Valentin on topic Display full background image

OK but I don't want to use pixels because the media query based on pixels rather than percentage will be very complicated to cope with so many different screen sizes.

Actually that is how media queries works. Need pixel values, in most cases maximum width to apply specific CSS properties to screens that match that criteria. If we add 100% instead of pixels the media query simply won't work.

Example:
@media (max-width: 960px) {
    .hundred-percent img {
        width:100%;
        height:auto;
    }
}
Mean the CSS from this media query will be applied to devices with screens with maximum 960px and lower only.

Let us know if this clarification helps.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 4 months ago #109733 by Juc2
Replied by Juc2 on topic Display full background image

Valentin wrote: Actually that is how media queries works. Need pixel values...


OK but in the html example...

.hundred-percent img {
width:100%;
height:auto;
}


...there is no need for a media query ie it does not matter what size the screen is - the image displays at 100% of the container div width. So I was wondering if there is something like this that works for a background image - but maybe there isn't...

Please Log in to join the conversation.

4 years 4 months ago - 4 years 4 months ago #109741 by Valentin
Replied by Valentin on topic Display full background image
Hi Juc2,

You're right about that in your last example.

So I was wondering if there is something like this that works for a background image - but maybe there isn't...

A background image can change automatically its size with this suggestion .
For more control you would require media queries to change the background properties depending on the screensize.

Hopes this clarification helps

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!