Adding Image as home page background behind text only

Graphene Theme Forum » Graphene Wordpress theme » Support

Adding Image as home page background behind text only

(20 posts) (4 voices)

Started 2 months ago by dbphoto1981
Latest reply from Prasanna SP
This topic is closed
This topic is resolved

Skip to the latest post | RSS feed for this topic

« Previous 12

Kenneth John Odle
Moderator
Try
```
.home .entry-content {
    background-image: url(http://www.truenorthconsulting.eu/?attachment_id=131);
}
```
to get to show on just the home page

More helps are available on my blog.
Follow this advice for setting up your blog.
Problems? Questions? Read the forum rules and help us to help you.
Posted 2 months ago #
dbphoto1981
Member

Hi, I tried that but the image dissapeared with the .home. tg.

Not sure how to do the <div> tag chainkiller?

Thanks for the help guys :)

Posted 2 months ago #
ChainKiller
Member
You need to edit your page and add <div id='whatever'> before everything on your editor then add </div> after it.

then go to editor and add to your style.css
```
#name you used for the id in this case whatever{
background-image: url(link to image);
}
```
Posted 2 months ago #
Kenneth John Odle
Moderator

A more efficient method is to target pages or posts by their unique ID or class:
http://blog.kjodle.net/2012/02/24/styling-wordpress-posts-pages-archives-and-home-pages-by-class/

Adding an additional <div> to the page could cause other problems.

More helps are available on my blog.
Follow this advice for setting up your blog.
Problems? Questions? Read the forum rules and help us to help you.

Posted 2 months ago #
dbphoto1981
Member
Thanks Kenneth, been looking at that and have added this:
```
.home #content {
    background-image: url(http://www.truenorthconsulting.eu/wp-content/uploads/2013/03/Boat-5.jpg);
background-size:648px 432px;
background-repeat:no-repeat;
}
```
This has got it behind, but now there is a white square where the content is covering this? any ideas? Thanks though, we're getting there :)
Posted 2 months ago #
Prasanna SP
Moderator
```
.home .page {
    background-image: url('http://www.truenorthconsulting.eu/wp-content/uploads/2013/03/Boat-5.jpg');
    background-repeat: no-repeat;
}
```
Personal Website prasannasp.net | WordPress Plugins developed by me.
Graphene Child Theme Template | Graphene Theme Tutorials | WordPress tutorials.
Posted 2 months ago #
dbphoto1981
Member

Thanks, that has it perfectly :) how can I remove the bottom border that is now showing up in the picture?

Posted 2 months ago #
Prasanna SP
Moderator
```
.home .entry-footer {
    border-top: none !important;
}
```
Personal Website prasannasp.net | WordPress Plugins developed by me.
Graphene Child Theme Template | Graphene Theme Tutorials | WordPress tutorials.
Posted 2 months ago #
dbphoto1981
Member

Great, thank you Prasanna :) Massive help and it's looking great now. Cheers.

Posted 2 months ago #
Prasanna SP
Moderator

You are welcome!
Marking thread as resolved. You can do this yourself as well.

Personal Website prasannasp.net | WordPress Plugins developed by me.
Graphene Child Theme Template | Graphene Theme Tutorials | WordPress tutorials.

Posted 2 months ago #

« Previous 12

Topic Closed

This topic has been closed to new replies.