Submitted about 3 years ago

HTML and CSS

Vihaga Yohan• 15

@VihagaYohan

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, I'm Yohan and new to web dev. My question is how to make background SVG image center in tablet mode using media queries. I tried with below code block and didn't work as i expected. body { background: url(../images/pattern-background-mobile.svg); background-position: center; background-repeat: no-repeat; background-size: cover; }

When I applied the above style, the background image was stretched. How to fix this issue. Thanks in advance, Yohan

Community feedback

Matthew Pierce• 495

@shake88junt

Posted about 3 years ago

Good job. An improvement would be to set the background color of the music icon to same color of the Annual plan background. (Ex. white to light blue).

A way to create background images that properly scale would be to create a div with the img inside of it -> <div> <img src = "./example_img.png"/> </div> then set the img visibility to hidden with 100% width-> <styles> img{ visibility: hidden; width: 100%; } </styles>

then set the background url -> <styles> div{ width: 100%; background: url('example_img.png') no-repeat; background-size: 100% 100%; } </styles>

CODEPEN EXAMPLE => Codepen Link

Marked as helpful

Vihaga Yohan• 15

@VihagaYohan

Posted about 3 years ago

@shake88junt Thank u for u feedback :)

Gaurav Shekhawat• 35

@Gaurav-Shekhawat

Posted about 3 years ago

@shake88junt Can you please tell me what are you trying to achieve with that codepen. I mean which problem were you facing??

Matthew Pierce• 495

@shake88junt

Posted about 3 years ago

@Gaurav-Shekhawat It just shows how to create scale-able background images. In that example the image container has a fixed width, but you could use that method to create background that maintain their dimensions.

Gaurav Shekhawat• 35

@Gaurav-Shekhawat

Posted about 3 years ago

@shake88junt oh, nice

Gaurav Shekhawat• 35

@Gaurav-Shekhawat

Posted about 3 years ago

I don't know if it will work, but try to enclose your card div inside other div, let say whose class is "outer-container", then set the background of that "outer-container" as that svg file.

Marked as helpful

Vihaga Yohan• 15

@VihagaYohan

Posted about 3 years ago

@Gaurav-Shekhawat Thank u for u feedback :)

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord