[Resolved] Responsive background in row

[sdanbu]

Hi GP

I’m using site origins editor and I have set up a background image in a row. How do I get it to be responsive?

I want to try the solution mentioned in the thread but I think I need to know how to call the class for that row…

https://generatepress.com/forums/topic/responsive-image-in-sections/

.generate-sections-container {
background-position: center center;
}

Is there a way to do this with GP content in general, not just the header?

@media (max-width: 768px) {
.generate-content-header {
background-size: contain;
}
}

Thanks

[Leo]

Hi Scott,

Background images are not responsive by nature so there’s actually no code to make it responsive.

Can you provide a link to your site? We can see if there are any alternative solution 🙂

[sdanbu]

Can I ask about this idea instead?

I made a div container and put an image in it, and I want to make it responsive.

Example of a DIV element with a background image:

https://www.w3.org/WAI/UA/TS/html401/cp0301/0301-CSS-DIV-BACKGROUND-IMAGE.html

Would it be possible to make that image responsive?

Maybe I can put a table inside it to center the text over the image after that.

[Leo]

If the image is inserted using the HTML image tag <img></img> then it should be responsive.

Let me know if this answers your question.

[sdanbu]

Thanks so now I can get the image to work by using the html and the css below but is there a way to put text in the middle of the image using GP?

I tried putting the image in a div and the text in another… but it wouldn’t work

https://teamtreehouse.com/community/how-to-create-a-responsive-div-with-a-background-image

.responsive-image{
width: 100%;
background-size: 100% 100%;
}

and finally, we serve for every view-port the right image:

/* Retina display */

@media screen and (min-width: 1024px){
.responsive-image{
background-image: url(‘../img/retina.jpg’);
}
}

/* Desktop */

@media screen and (min-width: 980px) and (max-width: 1024px){
.responsive-image{
background-image: url(‘../img/desktop.jpg’);
}
}

/* Tablet */

@media screen and (min-width: 760px) and (max-width: 980px){
.responsive-image{
background-image: url(‘../img/tablet.jpg’);
}
}

/* Mobile HD */

@media screen and (min-width: 350px) and (max-width: 760px){
.responsive-image{
background-image: url(‘../img/mobile-hd.jpg’);
}
}

/* Mobile LD */

@media screen and (max-width: 350px){
.responsive-image{
background-image: url(‘../img/mobile-ld.jpg’);
}
}

[Leo]

You would have to use a software like Photoshop to add the texts onto the image.

That method is actually not making the background image responsive (not possible), it’s simply specifying a different background image at different device break point.

If you can provide an example of what you are trying to accomplish I can probably give you some advice on how to go about it.

[sdanbu]

I am trying something like this
https://mcbuzz.wordpress.com/2008/10/14/how-to-put-text-on-top-of-image-wordpress/

<h1 style=”color:black;line-height:18px;padding:20px 10px 2px 20px;”>This is a Sample Headline</h1>
<p style=”color:black;padding:2px 10px 10px 20px;”>This is sample paragraph text on top of an image. You may need to change the color of the text so it’s readable over the image.</p>

When I did that, the image didn’t even appear.

[Leo]

Hmm I would still recommend using Photoshop or any image editing software that can add text on to the image.

The example in the page you provided it’s not responsive since it’s using the background image.

[Author]

Posts