Results 1 to 4 of 4

Thread: add background image to custom css

  1. #1
    Junior Member
    Join Date
    Oct 2015
    Location
    SE WA, USA
    Posts
    2

    add background image to custom css

    I know this is simple. When I add an image to trhe index.html <style> body { background:#ff0000 url("img/ulamgreen.png"); } </style> all is good.

    This is the code for the custom.css. Ho luck.

    html,body{
    background:#ff0000 url("img/ulamgreen.png");
    }

    .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #203731;
    background-color: #FFB612;
    }

    .nav-pills>li{float:left}
    .nav-pills>li>a{border-radius:4px}
    .nav-pills>li+li{margin-left:2px}
    .nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover
    {color:#203731;background-color:#ffb612;
    }

    a {
    color: #203731;
    background-color: #FFB612;
    text-decoration: none;
    }
    a:hover{
    color: #000;
    background-color: #FFB612;
    text-decoration: none;

    }


    Any ideas,

    1885

  2. #2
    Junior Member
    Join Date
    Sep 2015
    Location
    Fulltime RVer
    Posts
    10
    html,body{
    background-color:#ff0000:
    background-image: url("img/ulamgreen.png");
    }

    Is your css file at the same file level as the image? If not you may need ../ in the address.
    Last edited by edlfrey; 10-21-2015 at 12:36 AM. Reason: typo

  3. #3
    Junior Member
    Join Date
    Oct 2015
    Location
    SE WA, USA
    Posts
    2
    No luck with
    body {
    background:#f00 url("../img/ulamgreen.png");
    }

    in my custom,css at:

    dist/css/custom.css

  4. #4
    please put it in a code box,



    what post #2 meant is this:

    your css file is located at /css/custom.css : this means you have accessed a css folder to get to this
    your image folder might be located at /css/img/[picture] : this means you don't need to use ../ if it worked prior to you putting it in a css file
    but if your images folder is outside of the css folder you would do this to locate it ../folder-1/folder-2/img/[picture] : what this means is ../ is telling it to go back folder-1 is telling it to check folder-1 for folder-2 and see if img is there if it is then it will scan for your picture.

    If it is in the same folder as your CSS:
    Code:
    body{
    background: url('../img/ulamgreen.png') no-repeat;
    background-size: 100% 650px;
    }
    if it's in a different place:
    Code:
    body{
    background: url('../folder-1/img/ulamgreen.png') no-repeat;
    background-size: 100% 650px;
    }

Posting Permissions

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