Stretch Image to Fit Background?

[clemie]



@wrapper_background_image: url('https://i.imgur.com/E5dzmbZ.png') ;

@wrapper_background_color: @bg_color_2;

@wrapper_background_attachment: fixed;

@wrapper_background_repeat: repeat;

@wrapper_background_position: center center;

@wrapper_padding: 30px;

@wrapper_top_margin: 40px;

@wrapper_right_margin: auto;

@wrapper_bottom_margin: 50px;

@wrapper_left_margin: auto;



#wrapper { background: @wrapper_background_color @wrapper_background_image @wrapper_background_position @wrapper_background_repeat @wrapper_background_attachment; max-width: @wrapper_width; min-width: 995px; margin: @wrapper_top_margin @wrapper_right_margin @wrapper_bottom_margin @wrapper_left_margin; padding: @wrapper_padding; overflow-x: hidden; .box-sizing(); }


this is the code, I've tried putting no repeat and putting background size as cover but it didn't work so I removed both, if someone could please help it would be appreciated! 

[Kami]

can you provide your forum URL? my usual answer would be background-size: cover; but since you said you've tried that there might be something conflicting. (:

[clemie]

Yes here it is! thewildside.boards.net/

[Kami]

I've made the following adjustments in the dev console on my end, and it seems to work... are you putting 'background-size cover as its own property in #wrapper? If so, could you add the no-repeat / cover properties back in, so I can see what the end result is?

#wrapper {
 background: #3c454c url(https://i.imgur.com/E5dzmbZ.png) center center no-repeat fixed;
 max-width: 1170px;
 min-width: 995px;
 margin: 40px auto 50px auto;
 padding: 30px;
 overflow-x: hidden;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -ms-box-sizing: border-box;
 background-size: cover;

[Retread]

Jan 16, 2021 17:24:57 GMT -8 clemie said:



@wrapper_background_image: url('https://i.imgur.com/E5dzmbZ.png') ;

@wrapper_background_color: @bg_color_2;

@wrapper_background_attachment: fixed;

@wrapper_background_repeat: repeat;

@wrapper_background_position: center center;

@wrapper_padding: 30px;

@wrapper_top_margin: 40px;

@wrapper_right_margin: auto;

@wrapper_bottom_margin: 50px;

@wrapper_left_margin: auto;



#wrapper { background: @wrapper_background_color @wrapper_background_image @wrapper_background_position @wrapper_background_repeat @wrapper_background_attachment; max-width: @wrapper_width; min-width: 995px; margin: @wrapper_top_margin @wrapper_right_margin @wrapper_bottom_margin @wrapper_left_margin; padding: @wrapper_padding; overflow-x: hidden; .box-sizing(); }


this is the code, I've tried putting no repeat and putting background size as cover but it didn't work so I removed both, if someone could please help it would be appreciated! 

Hi clemie

The last declaration in your CSS isn't a proper declaration:
.box-sizing();

I don't know if that will cause the rule set to break but at best it will just be clutter. I suggest deleting that.

On this line:
@wrapper_background_color: @bg_color_2;

You're defining one variable by referring to another.
IF @bg _color_2 is defined somewhere else in the Style Sheet, this will work. If not, this will break the entire rule set you've written for #wrapper

[elli]

Jan 17, 2021 9:59:46 GMT -8 Retread said:

The last declaration in your CSS isn't a proper declaration:
.box-sizing();

I don't know if that will cause the rule set to break but at best it will just be clutter. I suggest deleting that.

Just wanted to point out that .box-sizing(); is valid; it's a mixin. I know because I wrote these themes. 😂 It sets box-sizing to border-box. Do not delete it! It will break the wrapper sizing.

clemie I was able to set background-size: cover; on the wrapper successfully. Can you share a screenshot of what happens when you try to add this, and the exact code you're using? Also, you're always welcome to message me for support with my themes! Especially since you commissioned the Wild Side theme.

[Kami]

Jan 17, 2021 9:59:46 GMT -8 Retread said:

On this line:
@wrapper_background_color: @bg_color_2;

You're defining one variable by referring to another.
IF @bg _color_2 is defined somewhere else in the Style Sheet, this will work. If not, this will break the entire rule set you've written for #wrapper

For whatever it's worth, you literally cannot save your CSS on PB if a variable is undefined, it errors out due to a variable being undefined. 

[Retread]

Jan 17, 2021 10:47:18 GMT -8 elli said:

Just wanted to point out that .box-sizing(); is valid; it's a mixin. I know because I wrote these themes. 😂 It sets box-sizing to border-box. Do not delete it! It will break the wrapper sizing.

Thanks elli

I edited my reply.

[elli]

Resolved over PM. 👍