Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2019
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question about Background Image

    I have just started learning HTML/CSS and am having problems changing some code i downloaded from codepen and would appreciate any feedback

    background: url(https://image.ibb.co/26sjhs6/showcase.jpg); this is the original code and it works I want to use an image saved in the root folder i have tried the code below and cant get it to work,


    background-image: url(images/1.jpg);

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,736
    Thanks
    5
    Thanked 535 Times in 521 Posts
    Root folder of what? The hard drive itself (not web facing usually), the directory the HTML is in? The directory the CSS is in?

    One thing beginners mess up a lot on -- we've all done this at one point -- is that links from your CSS are relative to the file the CSS is in. So if the image is in the same directory as the CSS, it would just be url(1.jpg); If it was in an images directory beneath where the CSS is, then you have it right. If it's in a /images directory parallel to the CSS -- say the CSS was in /style -- then it would be url(../images/1.jpg). NOTE, if you have to resort to ../, your directory structure is trash.

    When possible, page-links should go down-tree. To that end I suggest a directory structure like:

    / -- where your user callable HTML lives

    /images -- CONTENT images only, aka stuff used in <img> tags.

    /template -- CSS and any shared files for the template

    /template/images -- PRESENTATIONAL images called by the CSS. Aka "not content"

    Assuming the HTML was in the root of this tree

    <link rel="stylesheet" href="template/screen.css" media="screen">

    From that screen.css the image link would be:

    background:url(images/1.jpg);

    If the file was in /template/images.

    That help any?
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •