Jump to content

7.1 Background image size and background colour sizing

Recommended Posts

Site url  https://fennel-falcon-x6mh.squarespace.com/
Password: home
 
Breaking my head over the background images in my sections (7.1). They all stretch to fit the section, so in my longer sections it does look terrible.
So I put in some code to set the height of the background image:
.section-background img {
  height: 800px! important;
}
it works perfectly for the images, but then the background color that I set in styles seems not to show. So the color doesnt cover the entire section.. (The background color of the image itself is the same as the backgroundcolor.) While the overlay is displayed.
So It seems like if I put a background image, there is no background color displayed??
ughh, do I need some different code to fix this? ( I would like to do this sidewide. So targeting each section to give it its background color in css is not what I am looking for.
Link to comment

@tuanphan No the background image does not need resizing on mobile.

It is just the background color that won't show, so if I resize the background image to a certain hight so that it doesn,t stretch to the entire height of the section, there is a white space underneath because the background color doesn't show. I want the background color that is set in the section theme style to be shown. 

 

 

Edited by Annerie
Link to comment
  • 1 year later...

Hello,
I'm trying to create a menu that displays an image by hovering over text. 
First, How can I fit the background image to the width of the section?
Second, right now when I go over a text it brings the image on top of the page and moves everything down. so the section's height is dynamic. I want the text to be fixed and also the position of the images fixed so that by hovering over the text it only changes the background image.
I appreciate if you could help me with this question.

Screen Shot 2022-06-03 at 4.13.32 PM.png

Link to comment
On 6/4/2022 at 6:24 AM, ROX said:

Hello,
I'm trying to create a menu that displays an image by hovering over text. 
First, How can I fit the background image to the width of the section?
Second, right now when I go over a text it brings the image on top of the page and moves everything down. so the section's height is dynamic. I want the text to be fixed and also the position of the images fixed so that by hovering over the text it only changes the background image.
I appreciate if you could help me with this question.

Screen Shot 2022-06-03 at 4.13.32 PM.png

Hi. Have you tried Portfolio Page Yet? It has a layout to achieve this

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.