How to extend background image in header to cover the full space?

[LindsayDesigns]

Hello!

I’ve finally figured out how to add a background image into my header but cannot seem to figure out how to get it to extend all the way to the edge of the page - mainly on the right side where there is a white block of space. I am currently playing around in a duplicate version of my site to try and figure this out so I’m attaching a screenshot. My website is https://lindsay-designs.net/

Additionally, I’m also trying to figure out:

1. How to remove the thin white line that you see in-between my colorful graphic and the dark grey Announcement bar.

2. How to move the shopping cart icon to another place more visible on the screen. Potentially on the left with the search icon.

I greatly appreciate the help! Thanks in advance!

Lindsay

[LindsayDesigns]

I appreciate your quick reply! I am super new to the coding side of this… can you tell me where I should go to make the recommended adjustments and how I should enter the code? If it helps, this is the code I’ve added based on other discussions, etc that I’ve found to add the background image:

@media screen and (min-width: 1300px) {
header.header {
background: url(https://cdn.shopify.com/s/files/1/0880/5423/5422/files/Lindsay_Designs_colorful_squares_logo_3360x840_5ced639e-93f0-40e1-9ab4-2a60edf04039.jpg?v=1720410182) no-repeat;
background-size: 100%;
}
}
.shopify-section{
border-color: rgba(0,0,0,0) !important;
}

[Made4uo-Ribe]

Hi @LindsayDesigns

Would you mind to add the background image you have, so we can edit along with it. Thanks!

[BSSCommerce-HDL]

Hi @LindsayDesigns , I can’t see your background

[Made4uo-Ribe]

Thanks for the info, check this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

• And Save.
• result:
• 

[LindsayDesigns]

OMG! This fixed all 3 of my issues!! WOW! I’m so thrilled!!

Just have one more question… when I made the edit in my duplicate version it looked like this (which I LOVE!):

But then when I made the edit to the Live version the colorful square graphic changed a little and looks like this… it’ll work, but any thoughts on how to make it look like the above image?

Thanks a million!!!

Lindsay

[Made4uo-Ribe]

Welcome!

if your familiar with the code you can adjust it same on the code below.

.header {
    max-width: 100%;
    background: url('https://cdn.shopify.com/s/files/1/0880/5423/5422/files/Lindsay_Designs_colorful_squares_logo_3360x840_5ced639e-93f0-40e1-9ab4-2a60edf04039.jpg?v=1720410182');
    background-size: 100% 30vh;
    background-position: unset;
}

And save.

Here is the outcome.

[LindsayDesigns]

This is great! Thank you for the help!

I just noticed that none of this design shows up on the mobile view. I apologize for taking up more of your time but I was wondering if there is any way to add some sort of version of this colorful graphic near my logo in mobile view? I realize there’s not too much space so I honestly don’t really know where it would go… any thoughts or suggestions on this?

Much appreciated!