How to put image in the background of Wordpress

Question

How to put image in the background of Wordpress

Navigation

#1 by (1 votes)

0

I'm creating a template in wordpress, but now I'm not able to put a background image in the background:

Iwasabletoinsertthecolorbygivinganid="bg" pro body, because when I just tried to get the body element, the wordpress css rewrote mine and then it was not possible to change the color.

#bg {
    background-color: #f2f2f2;
}

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

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

css css3 wordpress

asked by anonymous 16.09.2016 / 00:20

1 answer

Doubt to get the id of a different table Php and MySql [closed] List data from 2 tables linked to parent table

score 1 · Accepted Answer

These root-based links can be a bit tricky on wordpress ... but I'll try to explain:

You have the WP home directory:

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

Now look at the url of each page of your site's wordpress:

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 are based on the home page of your site ... one option is: in the base directory of wordpress, create a folder img , put the image there.

Already in the CSS of home or page1 you add:

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

However, from other pages, like the subpage, you need:

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

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

A tip to speed up and put everything into one CSS file:

view the id of every page that is not a subpage: home = 1, page1 = 2, pageA = 3 .....

and add this:

#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 it will find the correct path for the images:)

Of course it's a kind of gambiarra, another way might be with some more intelligent plugin.

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

EDIT: some properties that can help you set up your background image: link