Header not full screen width

[mindmastery]

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

[BenPleysier]

I do not see a problem, the header stretches across on all of my devices.

[mindmastery]

Wow, you're right Ben - works fine on my laptop.  It must just be the way it displays on my wider PC monitor?

[osgood_ · Accepted solution]

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;

}

}

[mindmastery]

Many thanks Osgood, very insightful as usual - and has fixed the width issue thank you : )  However, somehow it decreased the height and the mountain was missing (that the guy is standing on) - https://www.mindtraining.net/test2.php​​​  - I changed the 400px height to 300px and it's somewhat better https://www.mindtraining.net/test3.php​​​​ (though still not to the height of the original - https://www.mindtraining.net/self-help-hypnosis/business-success/index.php​  ) - is there any way I could fix this Osgood?    Many thanks again - I am much further along and the problem is now a lot smaller : )

Cheers,

Craig T

[osgood_]

I'm not sure why you have the css selector below included in your styles?

.carousel-inner{background-image: width=100%;

background-repeat:repeat-x; height:300px;}

If you dont know why and don't have a reason just get rid of it.

[mindmastery]

Great stuff.  Did the trick!    Many thanks osgood.

Cheers,

Craig T