CODEWITHSUNDEEP
htmlcssbackground-image
AlpU
AlpU

Reputation: 373

How to access to a CSS file in HTML?

I know this is basic and a straight forward question, however couldn't seem to get my html file read the css file and background-image doesnt work.

This is my CSS:

body, html {
background-image: url(images/background.jpg);
width: 100%;}

This is my HTML:

<link rel="stylesheet" href="../static/style.css" />

File Tree:

web/ static/ file.css/

web/ templates/ file.html

web/ images/ image.css

Upvotes: 0

Views: 4575

Answers (5)

Mohsin Khan
Mohsin Khan

Reputation: 1

I would suggest you to check the exact names you used to name the files.

  1. You have used file.css and image.css but in you HTML it is Style.css

    <link rel="stylesheet" href="../static/style.css" />

  2. Try:

    body, html { background-image: url('/web/images/background.jpg'); width: 100%;}

Upvotes: 0

Ramin Esfahani
Ramin Esfahani

Reputation: 220

Try your css file as here:

body, html {
background-image: url('/web/images/background.jpg');
width: 100%;}

Also use the css link tag in this way:

<link rel="stylesheet" href="/web/static/file.css" />

Upvotes: 0

Scott
Scott

Reputation: 21890

in the CSS file...

body, html {
background-image: url(../images/background.jpg);
width: 100%;}

The ../ tells the path to back up out of the directory where the CSS file is located, and then look for the images directory.

Upvotes: 2

Anshil Bhansali
Anshil Bhansali

Reputation: 1

Change : <link rel="stylesheet" href="../static/style.css" />

to : <link rel="stylesheet" href="../static/file.css" />

You must give the correct path to the CSS file, in your tree you named the css file 'file.css' not 'style.css'

Upvotes: 0

Quentin
Quentin

Reputation: 944171

The CSS would load fine (assuming the URL to file.html is /templates/file.html and you aren't just using it as a server side template for a different URL) if you got the filename correct (it is file.css and not style.css).

The width: 100% should apply and create a (short) horizontal scrollbar, but there shouldn't be any other effect.

The image won't load because URLs are relative to the stylesheet and /static/images/background.jpg doesn't exist (according to your directory structure).

Upvotes: 2

Related Questions