I am designing a website using the Flat UI Twitter Bootstrap mod. While trying to set a background texture, I have found that it is not visible. Here is my CSS:
body
{
background-color: transparent;
background-image: url(img/texture.png);
}
Can someone help me to get my background texture to work?
Without more details, the first thing I would check is the path to the texture.png image. Since its a background image, the url is relative to your stylesheet.
So say your your CSS is in the website/css folder and the texture is in the website/images folder, your CSS would be more like:
body
{
background-color: transparent;
background-image: url(../images/img/texture.png);
}
If you know how to use the web inspector or something similar on most browsers, it will help to pinpoint the source of the problem.
Good luck!
Related
I'm creating a Spree store, and trying to make a button use an image instead of the default button that is included with the extension (and bootstrap). I can target the proper button in CSS, and deactivate the background color, border, etc. The background url doesn't work for the image (path: "app/assets/images/heart-icon.png"), but it works fine for any external image url.
I assume my problem lies within the asset pipeline, but I can't figure out the proper path to set as the url.
From my .css file:
form.new_wished_product button.btn.btn-info {
background: url(assets/heart-icon.png);
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
color: transparent;
border: none;
}
The button doesn't need to change when hovered or clicked -- it's just a simple image.
Thanks!
EDIT:
I saw the related question but thought mine was different because I had tried those solutions. I was trying to do this with plain CSS and changing the file extension to .css.scss worked for me.
Have you tried the image-url() helper instead of url()?
image-url('heart-icon.png');
This will find the asset within your site's file structure.
When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.
Trying to orientate myself with Jekyll. I've downloaded the following theme Mediator Theme. I'm trying to adjust the social icons to show icons for things like Github and Linked in. When I pop over to the _icons.scss file in the _assets folder/stylesheets I see this crazy thing for the background image of the icon. I'm assuming I have to create new icons with a similar format? What on earth is going on with this background image? Has anyone seen this before?
.icon-facebook {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAACgCAYAAACbg+u0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyNzI3RUZFOTE5QUMxMUUzQjlGQkJERENBQjc5RjE3RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyNzI3RUZFQTE5QUMxMUUzQjlGQkJERENBQjc5RjE3RiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI3MjdFRkU3MTlBQzExRTNCOUZCQkREQ0FCNzlGMTdGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI3MjdFRkU4MTlBQzExRTNCOUZCQkREQ0FCNzlGMTdGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ExBpwAAAA0JJREFUeNrsnTFrFEEYhndF0GA8MZg+BkXERhuN+gustLRMI/4FLbSysFdEwc7GMpAiSqwsLEyjhViqhWCboOilWd+5G9Ts3u3ezGfudnLPA2+VzeXyMLczs7fsmxdFkUE8+1CAwNYJPKOsKV2lID0Pa95Lhbx0DnQHvVE6jK0KW8ol5UPdCLyPvKF0vJ/aEfhLOYCrobiP88E6gaxpmsmZhVnGIBCBgEAEtoH9e+z/+ai8Vt4rX5QfPrP+524Nd0g5oswrx5SLyuVpFugW/0+VR15gKMvTLPClctOPNs6BgdxTrkxSXsoj0Mm7wywch7s2d5dlTBw/lRtZiy56pCbwofKVhXQchV+qsBOJZEP5zE4knleRv3dSOaccVWYG/Pz8tAh8G3j8CeWZssQI7PMp4NgZv0tZ5Bz4l5DZ9+o45KUmsBtw7NK43lRKAr8HHDuHQBsdBCYCAhGIQAQiEKJpw91ZT5THIxz3LuA1j2f9ry5H4blyKsRZ2/bC3wLl/O998zwfYduCew6B8SwwiSBwoiwikBGIQARyDkRgDG79d9j6Im3YiVxXzo5w3LWA17ytXGg4Znav7IWj9qANrGT9b+Z2/X1wNYZzIAIRiEBAIAIRiEBAIAIRiEBAIAIRiEBAIAIRiEBAIAITE9hFSS3dJoHrOKplvUngraz/uF+osuX91Ap0z0h2z0p+oWzjrMe291F5hrQjp4yAWRiBCEQgIHBSuFn432T0iQztEym76vkaIG8TaQOzOUhiWeAqomqzWha4YyGd5zl9Ig0XE+RreJ+IBLItaZ4zuEufZQwCEQgIRGAroE/E2CdS3omkuDtwj4d/oJyOVLAc8vfKOxH6RKb4HEifiFEefSKR0CdigD4RI/SJGKBPxAh9IkboEzFCn4gR+kSM0CdihD4RI/SJjBH6RFIBgQhEIAIRCNG04e6spPpEyndn0SdCn4h5wU2fiIEFJhEEThSepc8IRCACOQciMAr6RGoYW59ISneohrCyW++jfIcqV2M4ByIQgQgEBCIQgQgEBCIQgQgEBCIQgQgEBCIQgQgEBCIwMYH0idRDn4gR+kQMNPeJFEVBn0iVP30i3s8O6BNhFkZg0vwWYACVpaAuJblZHgAAAABJRU5ErkJggg==);
background-size:14px;
background-position:0 0;
width:14px;
height:14px;
}
What is the background image referencing? I've never seen this before. I figured they were just pulling in the font awesome library but the syntax I'm used didn't work and then I found this. Any help would be greatly apprecaited.
on my page i have a tree view which is loading nodes asynchronously before expanding. I can't figure out how to display standard "loading" gif while waiting for node to load. I understand that it's standard behavior, but it simply wont work. Probably it's some css issue..
My page references css like this:
<link href="Scripts/app/ext-4/resources/ext-theme-classic/ext-theme-classic-all-debug.css" rel="stylesheet" />
I know it's there because everything else is rendered correctly. In that css file is this class:
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif');
}
I'm certain that this class is used because if i put background-color: #ff0000; instead of background-image: url('images/tree/loading.gif');, the place where icon should appear gets red background. I understand that icon url should be set relative to css location, and it is. This is part of my file structure:
Scripts
app
ext-4
resources
ext-theme-classic
images
tree
loading.gif
ext-theme-classic-all-debug.css
Also, when i call that icon directly using img tag like this:
<img src="Scripts/app/ext-4/resources/ext-theme-classic/images/tree/loading.gif" />
loading icon is shown as expected.
Any ideas are much appreciated! Thanks!
EDIT: RESOLVED
I was able to figure out what was the problem. Since i was using custom icons for tree nodes (sorry for not mentioning that, i didn't think that was relevant), loading.gif was somehow showing underneath those icons. To resolve that, i changed
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif');
}
to
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif') !important;
}
I cant change my body background and background color with
For example:
body { background-color:#0c0; }
And
body { background-image:url(../images/bg/stone.png); }
Pleas help !
Possible reasons of not working:
You haven't linked your stylesheet
Your image would not be in the same path.
Your image's extension would be different.
Your hash or hexadecimal color code is wrong.
Your path to image is wrong.
Here is a working fiddle proving that it does work though the background of the body is a funny one as sometimes it calls it if you are calling it off the internet and sometimes it won't so make sure you have the image in a directory called images and the call it like this:
body {background: url('images/yourimage.jpg');}
and to add the color add your color like this:
body {background: red url('images/yourimage.jpg');}
Here is a working fiddle: http://jsfiddle.net/Hive7/xmj7C/
It uses this css:
body {
background: red url('http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg') no-repeat;
background-size: 500px 500px;
}
Make sure your file that your are calling it from is in the same directory as the one with the directory images
I have been trying to speed up my website, and in doing so I combined a number of my images into a sprite file. Everything works great now, however, when I run the site, either locally or on the test site it loads the sprite file twice, and I can't for the life of me figure out why. I am using masterpages with asp.net, and I only have one css file, not including the css files that some of my telerik controls use, and I have not tampered with any of the telerik css files or sprites. You can venture to our test site at: http://www.myheadpiece.com/test and take a look. The name of the sprite file is ms1.png. I can also provide other code/answers where necessary, I am just not sure what/where to look. If anyone has any ideas please let me know. Thanks.
Check the case of the paths to the sprite, you have
http://www.myheadpiece.com/test/Images/Structure/ms1.png
and
http://www.myheadpiece.com/test/images/Structure/ms1.png
One is with a capital "I" the other one with a small "i". So in you CSS you should refer to the sprite either with "Images" or with "images".
Your css should look like this:
.Sprite { background-image: url("../Images/Structure/ms1.png"); background-color: transparent; background-repeat: no-repeat; }
.HeaderLogo { background-position: 0 -768px; ... other styles ... }
.CartButton { background-position: -818px -754px; ... other styles ...}
And both HeaderLogo and CartButton should have second css class assigned ('Sprite') so you load an image only once for Sprite class and all the elements that are going to use it change it position only.