How to put image in the Wordpress background

Asked

Viewed 2,950 times

1

I’m creating a wordpress template, only now I’m not able to put a background image in the bottom of the site :

inserir a descrição da imagem aqui

I managed to insert the color giving an id="bg" pro body, because when I tried to just grab the body element, the wordpress css rewrites mine and then it was not possible to change the color.

#bg {
    background-color: #f2f2f2;
}

only when I try to put an image as background nothing happens(the directory is correct.).

#bg {
    background-color: #f2f2f2;
    background-image: url('/assets/images/bg/orange.png');
}
css wordpress css3

  • background-image: url('/Assets/images/bg/Orange.png') ! Important; test...

  • already tried with ! Mportant tb and unsuccessfully :/

  • puts the style directly in the html tag, if it works the path is right and has some style overlapping if it does not work the path is wrong.... ex: <div id="bg" style="background:url('/Assets/images/bg/Orange.png')no-repeat center; -Webkit-background-size: cover; -Moz-background-size: cover; -o-background-size: cover; background-size: cover;"></div>

  • the path to image is correct?

  • Friend, take a look at the Netwrok tab of the dev browser console to see the upload order of the css files.

  • Hello! Can you send a link with the code or copy the code here? So make it easier to help. Thank you!

Show 1 more comment

1 answer

2


These root-based links can be a bit tricky in wordpress... but I will try to explain:

vc has the base directory of WP:

wp-content
wp-includes
wp-admin
*vários arquivos

now look at the url of each wordpress page of your site:

home = www.meusite.com.br/
página1 = www.meusite.com.br/pagina1/
sub página = www.meusite.com.br/página1/subpágina/

if you rely on the home of your website... one option is: in the base directory of wordpress, create a folder img, put the picture there.

Ai in the home or page CSS 1 vc adds: 

#bg {
background-image: url('./img/imagem-de-fundo.png');
}

However, from other pages, such as the sub-page, you need to:

#bg {
background-image: url('../img/imagem-de-fundo.png');
}

repair the ../, which means "in the parent directory of which I am", while ./ says "in the directory where I am".

a tip to streamline and put it all in one CSS file:

see the id of every page that is not a sub-page: home = 1, page 1 = 2, page A = 3.....

and add that:

#bg {
background-image: url('../img/imagem-de-fundo.png');
}
body.page-id-1 #bg, body.page-id-2 #bg, body.page-id-3 #bg {
background-image: url('./img/imagem-de-fundo.png');
}

for each base page id, you add a body.page-id-x #bg, so he will find the right path to the images :)

of course q is a kind of gambiarra, another way perhaps would be with some plugin smarter.

But if your site is based on half a dozen main pages and up to a ton of sub-pages, you shouldn’t have any problems following this method.

EDIT: some properties that can help you setup your background image: http://www.w3schools.com/css/css_background.asp

Browser other questions tagged css wordpress css3

You are not signed in. Login or sign up in order to post.