Archived topic
Responsive image in sections
15 replies · Started by Anonymous on April 29, 2016
Hi Tom,
I'm using the sections addon (which is great by the way :-)) and have inserted images in some sections.
But when the screen becomes smaller, they are not responsive (as they can be in the page header) and are cut from the right side.
Is there a way of making images responsive in sections?
Thanks,
Corinne
Hi there,
They should be responsive - can you link me to the page?
Hi,
Here is the site : cpa-etudes.fr
On the homepage the image is in the page header. On the other pages they are in the first section (as I wanted to insert text above the image and couldn't manage to do so with the page header)
Thanks,
Corinne
Ah, well background images and static images behave differently when resizing the browser/being on mobile.
One thing you can do for the section backgrounds is center them:
.generate-sections-container {
background-position: center center;
}Adding CSS: https://generatepress.com/knowledgebase/adding-css/
In that case, I think I'll prefer to place them in the page header.
Just to make sure I didn't miss anything : I didn't manage to write the title above the image in the header, could you confirm it's not possible? Is there a way to do so?
If you add the image using HTML into the content section of the page header then you can add whatever you want above the image.
I feel stupid but it doesn't work...
I have used : <body background="image.png"></body>. It's not correct?
If I'm understanding correctly, you would add this into the "Content" box of the Page Header section:
<h1>Your title here</h1>
<img src="THE URL TO YOUR IMAGE HERE" alt="" />Let me know :)
Actually, I would like my title to be on the image (sorry for my english, maybe "above" was not the correct word...).
To synthesize, what I would like is :
- to have my image in the first section or in the page header
- with the title being on the image (like if the image was in the background)
- and the image being responsive when resizing the browser or being on mobile (and not being cut from the right side)
Thanks again :-)
Ah, well then you're really better off using the image as a background image.
Alternatively you could add your title to the image using Photoshop or something similar, but that's not great for SEO.
You'll run into all kinds of nightmares positioning text on top of an image, especially if you want it to be responsive.
Hi Tom,
I'd like to have the background images (page headers) on a few pages on my website resize on mobile so that it's possible to see the entire image and not just the center of it. Is there a code or anything that makes that possible?
Thanks,
Lisa
Not easily I'm afraid, backgrounds images aren't responsive by nature.
One thing you can try is adding this CSS:
@media (max-width: 768px) {
.generate-content-header {
background-size: contain;
}
}Thanks. Is it possible to add a height limit to the code as well?
The height of the image?
Contain will keep the images height, but keep the aspect ratio to the width of the element.
I'm not aware of any good ways to change the background images height.
Okay. Thanks!
Lisa
