Front page image – Sela theme

solaristherapyadmin · Member · Mar 20, 2015 at 9:41 pm
Copy link

Add topic to favorites
I would like to add an image to go behind the text of the front page, but I don’t want to use the featured image function because it puts my text in a narrow box and you cannot see all of my text.

So I would like to know what the css is for adding an image to the background of the main text area.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 23, 2015 at 4:21 pm
Copy link
Hi there, we can do this. Your image should be at least 1180px wide, but I wouldn’t go much more that 1500px wide so that it will load fast for your visitors. In the following code, I’ve pulled an image from your media library just as a placeholder and example. The first rule sets the image and makes it “cover” the entire area and is limited to just the home page. The second rule adds a transparent white to the back of the text so that it is more readable. This rule may or may not be needed depending on the nature and colors in your image. The first three numbers between the parentheses are the RGB color designation for white, and the last number is the opacity. The closer to 0, the more transparent. On the background declaration, replace the URL I have between the quote marks with the URL of your chosen uploaded image.
```
#primary {
    background: url('https://solaristest.files.wordpress.com/2015/03/clouds-news1.jpg') no-repeat scroll center top transparent;
    background-size: cover;
}
.hero {
    background-color: rgba(255, 255, 255, 0.5);
}
```
See what you think and let me know.
solaristherapyadmin · Member · Mar 23, 2015 at 8:17 pm
Copy link
That looks great! Thanks!

What’s the css to make the text bold?
solaristherapyadmin · Member · Mar 23, 2015 at 8:35 pm
Copy link
One problem! The code is making all of the text boxes on my other page to have the background image. But I only want it to show on the front page.
thesacredpath · Member · Mar 23, 2015 at 10:42 pm
Copy link
Ah, to limit it to only the main page, we can precede the CSS selectors with the “home” CSS body class (found in the opening HTML body selector) for the page like this.
```
.home #primary {
    background: url('https://solaristest.files.wordpress.com/2015/03/clouds-news1.jpg') no-repeat scroll center top transparent;
    background-size: cover;
}
.home .hero {
    background-color: rgba(255, 255, 255, 0.5);
}
```
To make the text on the home page content bold, add the following.
```
.home .entry-content {
    font-weight: bold;
}
```

No items found.