How to Make Header Background Image Full Width on Debut?

Solved
PickleKing
Excursionist
26 0 11

Hi,

I'm trying to add an image background to my header.
Preview URL: https://7b1mgv8h27wd8ehw-53754724549.shopifypreview.com

So far, it looks like this:

Screen Shot 2021-02-27 at 15.48.56.png

 

If I put in some code to stop the image repeating, it looks like this:

Screen Shot 2021-02-27 at 15.50.34.png

This is the code I am currently using to make the header have a background image:

/*==CHANGE HEADER BACKGROUND COLOR==*/
.site-header__mobile-nav,.site-header{ background-color: transparent; background-image: url("https://cdn.shopify.com/s/files/1/0537/5472/4549/files/header_bg_13-01.png?v=1614440706")}

I would like to make the image the whole width of the page, for every page on my website. Is this possible?

If you can help me with the code that would be very much appreciated. Thank you. 

0 Likes
suyash1
Shopify Partner
2550 272 422

This is an accepted solution.

@PickleKing - add this to the very end of theme.css file, this should do it

 

@media only screen and (min-width: 750px){
.site-header { padding: 0;}
}
You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
PickleKing
Excursionist
26 0 11

Wow thank you SO much! It works!
I have been trying to do this for hours! You are an absolute coding legend!

Many thanks!

suyash1
Shopify Partner
2550 272 422

@PickleKing - welcome

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly