Guest Posted September 8, 2020 Share Posted September 8, 2020 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 Posted September 8, 2020 Share Posted September 8, 2020 You want to resize banner image on mobile or? 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
Guest Posted September 8, 2020 Share Posted September 8, 2020 (edited) @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 September 8, 2020 by Annerie Link to comment
Guest Posted September 9, 2020 Share Posted September 9, 2020 (edited) @tuanphan Do you know understand what I am trying to achieve? Edited September 9, 2020 by Annerie Link to comment
tuanphan Posted September 12, 2020 Share Posted September 12, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:767px) { .homepage #page section:first-child { min-height: unset; height: 50vh; } } DKP 1 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
ROX Posted June 3, 2022 Share Posted June 3, 2022 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. Link to comment
tuanphan Posted June 10, 2022 Share Posted June 10, 2022 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. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment