Hi Guys, I wonder if any of you gurus can help me with something that would probably take me a year, and you ten seconds ; ) - the header on my page is not going across the full width of the PC screen - https://www.mindtraining.net/self-help-hypnosis/business-success/index.php I'm using the latest version of Dreamweaver. Any suggestions appreciated!
Cheers,
Craig T
mindmastery wrote
Wow, you're right Ben - works fine on my laptop. It must just be the way it displays on my wider PC monitor?
On wide screens the background image is stuck to the right side of the browser window as a result of background-position: center right; This results in white space to the left of the image. However I guess you have positioned the image to the right on purpose to always have the person on the right in view. If you want the image to consume the width of the browser window in all sized screens add background-size: cover, as below:
.active {
height: 450px;
margin-top: 50px;
background-image: url(https://www.mindtraining.net/images/selfhelp-header2.jpg);
background-repeat: no-repeat;
background-position: center right;
background-size: cover;
}
EDITED:
I tend to use media queries to adjust the height of the <div> in wider browser windows so the image doesnt look too thin depth wise and stupid in relationship to other components on the page. So it starts out at 450px by default then gradually decreases. I think you have made adjustements for smaller screens but not as the browser window gets wider.
@media screen and (max-width: 1200px) {
.active {
height: 300px;
}
}
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices