Use of CSS background-image and background-color

Navigation
0

I'm studying HTML and CSS through Caelum's handout and I'm having trouble making CSS work correctly 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 do not see the backgroud-image and background-color change on the page.

    
asked by anonymous 28.10.2017 / 02:02

1 answer

3

Invert 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");

That's because maybe the bars you used in HTML and CSS might be "escaping something", an important detail to know is that C: (which is basically using the file:/// protocol) will not work when your site is for a WEB server, use the relative path rather than absolute.

Assuming 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 for 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>

In this way, even moving the folder to another location or to an online server will probably still work, and no adjustment is necessary.

    
28.10.2017 / 02:12
Auto increment unique in all DB tables Concatenate single quotation marks in date variable?