[Drew AParticipant]

I have a background image for a content band which is essentially white on one half where I’ve placed text. There is a point when the window is resized that the text takes on the entire content band overlapping the entire background image causing problems with readability (because it’s not just over the white part). The most logical solution I can think of is for the image to drop below the text at a certain point during the resize like when you resize the google drive website https://www.google.co.nz/drive/. There may be a different way to deal with the text overlap that I’m not aware of. Any thoughts?

Thanks!
Drew

[Drew AParticipant]

I’m in local dev and can’t go live because it’s a replacement site and the current themes not X. This is an image of the scenario http://tinypic.com/r/rlvvdk/8 – on the right you can see what happens when I resize the window, on the right you can see what the page looks like in full screen on desktop (I put in photoshop so I could place on same screen without it resizing. It’s so nice full screen that!

[ChristianModerator]

Hey Drew,

In that case, you should not use the image as a background since you have important information in there. The best way is to setup 2 columns. Your text on the left and image on the right. In mobile view, the image will stack below the text.

Thanks.

[Drew AParticipant]

I’m struggling to get the full width image off the page look with 2 columns and an image. What about hiding the background image when the window reaches a certain size? Like you can do with a slider?

Thanks,
Drew

[Paul RModerator]

Hi Drew,

Good idea, to do that you can add a unique class to your content band.

eg. Add nobackground

http://screencast.com/t/n3a7IAXEONYI

Then to make the background disappear on a certain window size, you can add this under Custom > CSS in the Customizer.

@media (max-width: 967px){
    body .nobackground {
        background:transparent;
    }
}

You may change the screen size 967px for when you would like the background to disappear.

Hope that helps.

[Drew AParticipant]

Thanks!

I just tried it, will the results only be visible on mobile devices? It seems that no matter what px width I choose the background won’t disappear.

[RubinKeymaster]

Hey Drew,

Try adding the !important statement to it:

@media (max-width: 967px){
    body .nobackground {
        background:transparent !important;
    }
}

[Drew AParticipant]

That worked thank you!

[Paul RModerator]

You’re welcome!

[Author]

Posts