Use of CSS background-image and background-color

Asked

Viewed 1,151 times

0

I’m studying HTML and CSS through Caelum’s workbook and I’m having trouble getting CSS to work properly on the page.

I have the following CSS code:

body {
    color: #333333;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans serif;
}

h1 {
    background-image: url(C:\Users\Caique\Documents\Study\HTML - CSS - JavaScript\Caelum\Mirror Fashion\caelum-arquivos-curso-web\mirrorfashion\img\sobre-background.jpg);
}

h2 {
    border-bottom: 2px solid #333333;
}

figure {
    background-color: #F2EDED
    border: 1px solid #ccc;
    text-align: center;
}

figcaption{
    font-style: italic;
}

And the HTML code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sobre a Mirror Fashion</title>
        <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
        <img src="C:\Users\Caique\Documents\Study\HTML - CSS - JavaScript\Caelum\Mirror Fashion\caelum-arquivos-curso-web\mirrorfashion\img\logo.png">

        <h1>A Mirror Fashion</h1>

        <p>
        A <strong>Mirror Fashion</strong> é a maior empresa comércio eletrônico no segmento de moda em todo o mundo. 
        Fundada em 1932, possui filiais em 124 países, sendo líder de mercado com mais de 90% de 
        participação em 118 deles.
        </p>

        <p>
        Nosso centro de distribuição fica em Jacarezinho, no Paraná. De lá, saem 48 aviões que 
        distribuem nossos produtos às casas do mundo todo. Nosso centro de distribuição:
        </p>

        <figure>
            <img src="C:\Users\Caique\Documents\Study\HTML - CSS - JavaScript\Caelum\Mirror Fashion\caelum-arquivos-curso-web\mirrorfashion\img\centro-distribuicao.png">
            <figcaption>Centro de Distribuição da Mirror Fashion</figcaption>
        </figure>

        <p>
        Compre suas roupas e acessórios na <strong>Mirror Fashion</strong>. Acesse nossa loja ou entre em contato 
        se tiver dúvidas. Conheça também nossa história e nossos diferenciais.
        </p>

        <h2>História</h2>

        <figure>
            <img src="C:\Users\Caique\Documents\Study\HTML - CSS - JavaScript\Caelum\Mirror Fashion\caelum-arquivos-curso-web\mirrorfashion\img\familia-pelho.jpg">
            <figcaption>Família Pelho</figcaption>
        </figure>

        <p>
        A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A 
        família <em>Pelho</em>, tradicional da região, investiu todas as suas economias nessa nova iniciativa, 
        revolucionária para a época. O fundador <em>Eduardo Simões Pelho</em>, dotado de particular visão 
        administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado 
        de seu filho <em>E. S. Pelho Filho</em>, atual CEO. O nome da empresa é inspirado no nome da família.
        </p>

        <p>
        O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países. 
        Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões 
        de usuários diferentes, em bilhões de diferentes pedidos.
        </p>

        <p>
        O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do 
        Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do 
        Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e 
        nos escritórios em todo país.
        </p>

        <p>
        Dada a importância econômica da empresa para o Brasil, a família <em>Pelho</em> já recebeu diversos prêmios, 
        homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror 
        Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
        </p>
    </body>
</html>

But I don’t see the backgroud-image and background-color changes on the page.

html css background-color background-image

1 answer

3


Flip the bars and add quotes:

background-image: url("C:/Users/Caique/Documents/Study/HTML - CSS - JavaScript/Caelum/Mirror Fashion/caelum-arquivos-curso-web/mirrorfashion/img/sobre-background.jpg");

This is because maybe the bars you used in HTML and CSS might be "missing something", an important detail to know is that C: (which is basically using the protocol file:///) will not work when your site goes to a WEB server, use the relative path instead of absolute.

Suppose your folder structure looks like this:

./mirrofashion
├── index.html
├── estilo.css
└── ./img
    ├── sobre-background.jpg
    ├── familia-pelho.jpg
    └── centro-distribuicao.png

You can adjust your CSS to this:

h1 {
    background-image: url(img/sobre-background.jpg);
}

And your HTML for this:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sobre a Mirror Fashion</title>
        <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
        <img src="img/logo.png">

        <h1>A Mirror Fashion</h1>

        <p>
        A <strong>Mirror Fashion</strong> é a maior empresa comércio eletrônico no segmento de moda em todo o mundo. 
        Fundada em 1932, possui filiais em 124 países, sendo líder de mercado com mais de 90% de 
        participação em 118 deles.
        </p>

        <p>
        Nosso centro de distribuição fica em Jacarezinho, no Paraná. De lá, saem 48 aviões que 
        distribuem nossos produtos às casas do mundo todo. Nosso centro de distribuição:
        </p>

        <figure>
            <img src="img/centro-distribuicao.png">
            <figcaption>Centro de Distribuição da Mirror Fashion</figcaption>
        </figure>

        <p>
        Compre suas roupas e acessórios na <strong>Mirror Fashion</strong>. Acesse nossa loja ou entre em contato 
        se tiver dúvidas. Conheça também nossa história e nossos diferenciais.
        </p>

        <h2>História</h2>

        <figure>
            <img src="img/familia-pelho.jpg">
            <figcaption>Família Pelho</figcaption>
        </figure>

        <p>
        A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A 
        família <em>Pelho</em>, tradicional da região, investiu todas as suas economias nessa nova iniciativa, 
        revolucionária para a época. O fundador <em>Eduardo Simões Pelho</em>, dotado de particular visão 
        administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado 
        de seu filho <em>E. S. Pelho Filho</em>, atual CEO. O nome da empresa é inspirado no nome da família.
        </p>

        <p>
        O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países. 
        Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões 
        de usuários diferentes, em bilhões de diferentes pedidos.
        </p>

        <p>
        O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do 
        Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do 
        Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e 
        nos escritórios em todo país.
        </p>

        <p>
        Dada a importância econômica da empresa para o Brasil, a família <em>Pelho</em> já recebeu diversos prêmios, 
        homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror 
        Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
        </p>
    </body>
</html>

This way, even if you move the folder to another location or to an online server will probably still work and no adjustment will be required.

Browser other questions tagged html css background-color background-image

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