Background image

keperexdelta · Member · Sep 8, 2016 at 12:43 pm
Copy link

Add topic to favorites
Hello,

I’m having some trouble with my background. I uploaded a new image for the background but it shadows the texts and the images. So what I wanted to do was to restrict the image just to the margins. Something similar to this webpage: http://www.walluestreet.com/analisis/mercado

I see that thay have like a white box where it is all the content while the surroundings is where the background image is, but I don’t know how to do this with CSS.

Thanks for your help

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 9, 2016 at 1:37 am
Copy link
Hi there, with the structure of Argent, this will be a bit complex to do. Let’s start with this and see what you think and then go from there. Make sure and go back to Customize > Colors & Background and set your image to repeat vertically.
```
.page-header, .page-content {
    background: #fff;
    padding: 10px 20px;
}
.home .page-header {
display: none;
}
body.custom-background {
    background-size: 100% auto;
}
```
On your main page, you have not title, so the second rule above hides that div so there isn’t a blank white band above the the content.

The third rule above sets your background image to cover the entire area horizontally.
keperexdelta · Member · Sep 9, 2016 at 12:31 pm
Copy link
Hi,

That effectivelt creates the white box I want but is very small, I think that has to do with the theme argent. Anyway is there a way to increase the transparency of the background image with CSS? I think increasing the transparency will make the texts more visible.

Thank you again
siobhyb · Member · Sep 9, 2016 at 2:54 pm
Copy link
Hi there,

You could also add width: 90%; to the CSS that’s targeting .page-header, .page-content in order to increase it’s overall width:
```
.page-header, .page-content {
    background: #fff;
    padding: 10px 20px;
    width: 90%;
}
```
You could make the background transparent by changing #fff to transparent in the above, also:
```
.page-header, .page-content {
    background: transparent;
    padding: 10px 20px;
    width: 90%;
}
```
Let me know how you get on with the above changes. :)
keperexdelta · Member · Sep 12, 2016 at 12:23 pm
Copy link
Thanks it worked, but actually I wanted a degree of transparency, not the background image to dissapear, I think I can use opacity for that.

Regards
keperexdelta · Member · Sep 12, 2016 at 12:39 pm
Copy link
The only thing is that now the image and the text seem to be aligned to the left, I am trying to change that, however I am unable to do it with the commands

margin-left: auto;
margin-right: auto;

It only seems to happen in the first page,
kathrynwp · Staff · Sep 12, 2016 at 3:58 pm
Copy link
Thanks it worked, but actually I wanted a degree of transparency, not the background image to dissapear, I think I can use opacity for that.

Before I provide more code, could you please clarify exactly which element you’re trying to modify the transparency of? Is it #1, 2, or 3 in this screenshot, or something else?
kathrynwp · Staff · Sep 12, 2016 at 4:09 pm
Copy link
The only thing is that now the image and the text seem to be aligned to the left, I am trying to change that, however I am unable to do it with the commands

margin-left: auto;
margin-right: auto;

It only seems to happen in the first page,

That’s happening because of this piece of custom CSS:
```
.page-content {
     padding: 10px 20px;
     width: 90%;
}
```
If you want to keep the white box wide on the homepage but centre the content itself, you can add this:
```
.home .page-content p {
    text-align: center;
}
```
keperexdelta · Member · Sep 13, 2016 at 3:02 am
Copy link
Hi, many thanks. The element I wanted to increase the transparency to was 2.

Regards
kathrynwp · Staff · Sep 13, 2016 at 2:23 pm
Copy link
If you’d like to put a translucent dark overlay over the body background image, you can try something like this. You can also adjust the colour and opacity as you like. For example, you can change #000 to #fff if you’d like a white overlay instead.
```
body:before {
    background: #000;
    content: "";
    display: block;
    opacity: 0.5;
    position: absolute;
    height: 100%;
    width: 100%;
}
.site {
    position: relative;
}
```
If you’re looking for the image itself to be translucent, you’ll need to do that first in a graphics program and then re-upload it.

The topic ‘Background image’ is closed to new replies.

No items found.