How to set the background image using Sass - css

I tried setting my background image this way:
body
font: 100% $font-stack
background: url(images/body-bg.png) repeat #181d25
But it is showing an error, i.e. invalid. Can anyone help me?


Is the images folder a subdirectory of your css folder? If it is a sibling of your css folder you have to move up the file tree.
background: url("../images/body-bg.png") repeat #181d25;

Related

Insert an image that already exists in the project folder

I have this image in one of my project's folder:
I wantto make a icon with that image, so i tried to call it like this:
But it keeps occuring the error:
I think I have this error because I'm not giving any path.
Can you help me please?
Thanks

The css file is searching in the same folder as it to find the background image.
Try:
background: url("../img/Arrow_Circle_Right-32.png")
The ".." goes back one folder, then the img accesses the image folder.

Use this path in your css:
background: #ff9900 url("../img/Arrow_Circle_Right-32.png") no-repeat 10px center;
Please note the prefix for your base path: ../img/
Like that you go back from the css directory and then you enter in your img directory, that include your image.

Background hides when moving css to css folder?

when my css is located in the root of my website, the background loads fine by adding
background: url(images/main-bg.jpg) repeat;
into the body, but when i move the css into a folder named "css" and re-link the HREF it seems to disappear?

Are you using relative links correctly? If you're moving that .css file into a folder, the new relative path should be
background: url(../images/main-bg.jpg) repeat;
...if the images folder is in the root folder as well.
You can use a debugger like Chrome's developer tools or Firebug to double check if the resource is being loaded correctly.

Try to change path to resource background: url(../images/main-bg.jpg) repeat;

You'll need to update the CSS. The url is relative to the relationship of the CSS to the image (not the document). Try background:url(../images/main-bg.jpg) repeat;

That's because your CSS is now searching for the image in (root)/css/images/main-bg.jpg, you need to use a relative path.
background: url(../images/main-bg.jpg) repeat;
.. means go back one directory.

Images in my stylesheet

I am trying to include a background image in a css file located here:
public_html/css/folder/style.css
and the image is located in
public_html/img/image.png
I tried using
background: url("../img/image.png");
How can I get to that image?
Thank you

You have to go up 2 steps in the directory structure:
background: url("../../img/image.png");

Changing background of wordpress theme

I have been trying to change the background image of the wordpress theme but i am unable to change it.
I tried:
body {
background : url('images/squad.jpg');
}
I placed this code under design-settings in custom css styles. But i do not see any changes

in wordperss stylesheet file, search for body and html selectors and check if any background applied to them.
in html selector add this property:
backbround: #fff url(imagePath) no-repaet top left;
you can change #fff to the color that is more related to your background image. it's not necessary, but it's best practice.
if your background image is a pattern and you want it to be repeated, change no-repeat to repeat this should work.

Is your css file is in separate folder?
try this
body {background : url('../images/squad.jpg');}

can't seem to see logo.jpg inside the header_container div?

I can't figure out why the image is not resolving inside the div id="header_container"
everything looks ok, the image is on the server,,, what's the issue here?
http://winteradagency.com/mrw/index.php
any ideas?
thanks

When you make a CSS url() directive a relative path, it is relative to the CSS file, not the page the CSS is on. In your case, the header_container directive is:
background-image: url(images/logo.jpg);
Because your CSS file is in /mrw/styles/styles.css, the path that the image is being looked for at is /mrw/styles/images/logo.jpg. You need to adjust your CSS directive accordingly. One of the following should work:
background-image: url(/mrw/images/logo.jpg);
or
background-image: url(../images/logo.jpg);

Background image URL's in a CSS file are relative to the URL of the CSS file itself, not to the URL of the parent HTML page which included the CSS file.
So, to fix your particular problem, change images/logo.jpg to ../images/logo.jpg, otherwise it is trying to lookup the image in styles/images/logo.jpg

Resources