Background URL CSS - For image relative, absolute path

A style sheet can reference URLs or links to other files, almost always it is images that are linked as background or fonts.

Background URL CSS - For image relative, absolute path | Learn CSS | A style sheet can reference URLs or links to other files, almost always it is images that are linked as background or fonts

In the case, rare, that in a style sheet should reference URLs or links to other files , almost always it is about graphics that are linked as background to an element. In this case, a particularity must be taken into account:

In CSS, URLs are always defined with reference to the style sheet, not the document linked to it.

The proper directory structure could be, for example:

file.html
images/imagen.gif
css/your-stylesheets.css

Therefore, if you want to integrate a background image on your page, the CSS file will appear, for example:

body {
background-image: url (../imágenes/imagen.gif);
/* otras declaraciones */
}

You can clearly see that the trajectory of the image, after the initial URL, is written in parentheses ().

Of course you can also use absolute URLs instead of relative.

body {
background-image: url (http://www.dominio.es/imagenes/imagen.gif);
/* other statements */
}

In theory, the URL itself can be written in quotes, double or single. Although it can also cause an error message (depending on the navigator). IE / MAC, for example, does not accept single quotes in URLs.

🤖

ChatGPT Free
Ask questions on any topic

CITE ARTICLE


For homework, research, thesis, books, magazines, blogs or academic articles

APA Format Reference:

Delgado, Hugo. (2019).
Background URL CSS - For image relative, absolute path.
Retrieved Jan 10, 2024, from
https://disenowebakus.net/en/url-css

Participates!

Share it with your friends in Social Networks!

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.

CONTINUE LEARNING

IT ALSO DESERVES TO PAY TO VISIT:

Not finding what you need?

Use our internal search to discover more information
Related content:

Would you like to learn more about Web Design?

Meet all the courses and tutorials that we have for you completely free
Learn Web Design
 

Leave your Comment

SPONSOR

Your business can also appear here. More information

Your browser has blocked advertising.
Please 🙏 allow to visualize the announcements to be able to access, thank you.