How to make a background image span the entire webpage?

Store Design
1

I would like my background image to span the entire webpage, not just the center portion. How do I do this?

Screenshot 2024-02-26 155549.png
Screenshot 2024-02-26 155549.png1900×114 8.75 KB

2

Hey @adamjohnsoko please share the website url.

Thanks

3

https://opaliquebeauty.com/

4

@adamjohnsoko password?

5

I removed the password, you should be good

6

@adamjohnsoko please add the below css to “base.css” file.

.announcement-bar-section .page-width{
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.announcement-bar-section .announcement-bar {
    background-size: cover;
}
7

adamjohnsoko_0-1709034615042.png
adamjohnsoko_0-1709034615042.png1125×129 11.1 KB

That fixed most of it (Thank you) but I still have the edges. When I move down to the header will I have to add something similiar?

8

@adamjohnsoko apply !important after the padding. just like this

.announcement-bar-section .page-width {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
}

It will work.

Thanks

9

Perfect!!!

10

Would I apply the same series of code to the header?

11

@adamjohnsoko No , there will be different codes for that.

header.header {
    max-width: 100%;
    background-size: cover;
}
12

How would I add a background image to my featured colletion and footer section?

13

@adamjohnsoko create a new thread.

Thanks

14

Hey @adamjohnsoko If you find my answer helpful then you can mark my answer as an accepted solution. It will really helpful to me.

Thanks