6 replies [Last post]
sweck
sweck's picture
Offline
newbie
Last seen: 4 years 16 weeks ago
Timezone: GMT-4
Joined: 2015-04-27
Posts: 4
Points: 5

Hi, I'm trying to get a background image to align to the bottom right of a page and just cannot figure out how to do it. I can't figure out how the page is structured in order to force the image down there. Any ideas? The image is that of the red gear. Here's the link:

http://anewmachine.com/wp/services

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 17 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Remove the background rules

Remove the background rules from #theme-page and place them on the html element:

html {
background-color: #fff;
background-image: url("http://anewmachine.com/wp/wp-content/uploads/2015/03/big-gear.png");
background-position: right bottom;
background-repeat: no-repeat;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sweck
sweck's picture
Offline
newbie
Last seen: 4 years 16 weeks ago
Timezone: GMT-4
Joined: 2015-04-27
Posts: 4
Points: 5

Seems like that should have worked

Hi, Gary - thanks for the reply. It certainly feels like that should work, but when I implement it, nothing shows up. Any reason you can think why that would be?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 17 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

It's a political cover up

See this:

body {
  background-color: #fff;
}

Remove that rule and the html background can shine through.

I must have removed it while testing and forgot to mention it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sweck
sweck's picture
Offline
newbie
Last seen: 4 years 16 weeks ago
Timezone: GMT-4
Joined: 2015-04-27
Posts: 4
Points: 5

Still no dice

Gary, you are a real saint for continuing to look at this. So I set the body background-color to transparent

body {
    background-color: transparent;
}

and it still is not showing up. Sure is frustrating since your advice seems like it should make it work. Any other suggestions? Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 17 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Apparently you only removed

Apparently you only removed the background-image property from #theme-page. Remove all the background rules.

#theme-page {
    background-color: #fff;
    background-position: right bottom;
    background-repeat: no-repeat;
}

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sweck
sweck's picture
Offline
newbie
Last seen: 4 years 16 weeks ago
Timezone: GMT-4
Joined: 2015-04-27
Posts: 4
Points: 5

This is killing me

So I see the gear now, but any reason it's not at the bottom of the page? Seems like that position right bottom ought to put it on the bottom, right? Sigh. Thanks again for any help!