Mobile background-image is zoomed in | WordPress.org

Resolved diggaciao
(@diggaciao)

8 years, 9 months ago

Hello everyone,

even though i searched for a solution to this problem i couldn’t find one. Okay so first things first:

This is the website i’m working on: http://diggaciao.de/

And I guess my problem is slightly easy because it’s just about the background-image. The mobile version of theme zooms into the background which makes the one you can see on the desktop version look like this:

https://picload.org/image/rdaargag/screenshot_20161004-152159.png

But I want the background-image just be responsive and look as starry and detailed as the desktop one and not that zoomed-in effect.

I tried several CSS selectors and stuff to come to that but it didn’t work. please help me find a solution 🙁

Viewing 5 replies - 1 through 5 (of 5 total)

Denzel Chia
(@denzel_chia)

8 years, 9 months ago

Hi,

You can make adjustments to background size using the background-size css property.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Use @media query to target mobile device.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Thank you
Thread Starter diggaciao
(@diggaciao)

8 years, 9 months ago
Hello Denzel,

unfortunately i already tried that but it doesn’t affect the responsive design. Here’s the code i used for it:
```
@media screen and (max-width: 720px) {
	body {
		background: white url('http://diggaciao.de/wp-content/uploads/2016/10/galactic_opt2.jpg');
		background-size: 50%;
	}
}
```
You can have a look at the mobile site now and you’ll see that the background completely dissappeared 🙁
Denzel Chia
(@denzel_chia)

8 years, 9 months ago

Hi,

Your image URL in your css code leads to 404.
http://diggaciao.de/wp-content/uploads/2016/10/galactic_opt2.jpg

It does not link to an image file.

Thank you

Thread Starter diggaciao
(@diggaciao)

8 years, 9 months ago

Okay, wow, that’s pretty embarrassing. Sorry to bother – now it just works fine. The location of the img i give was really wrong…

Denzel Chia
(@denzel_chia)

8 years, 9 months ago

Hi,

You are welcome.
Please set the status of this thread to resolved.

I will not be monitoring this thread from now on. 🙂

Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Mobile background-image is zoomed in’ is closed to new replies.

Tags

background

In: Themes and Templates
5 replies
2 participants
Last reply from: Denzel Chia
Last activity: 8 years, 9 months ago
Status: resolved