The background image is not appearing for the following CSS:
background: -webkit-linear-gradient(#fcfcfc,#cbcbcb);
background-image: url("../images/new/account-dropdown.png") no-repeat 100%;
How would I correctly do the above?
Still have not received a correct answer that works...in the meantime I am using an additional <img> tag that is absolutely positioned over the gradient.
Try this:
background-image: url("../images/new/account-dropdown.png");
background-size: 100%;
background-origin: content;
RichardTowers was close, but the gradient needs to be before the image:
background-image: -webkit-linear-gradient(top, #444444, #999999), url("../images/new/account-dropdown.png") no-repeat 100%;
Try giving z-index property to display one background over the other.
Related
My background output is not coming as it should be.
I was expecting this
only the code that I used is html with external css with empty body tag
<body></body>
css code is:
body{ background: linear-gradient(to bottom right, red, blue); }
but the output came like this.
i am unable to detect any problem accept for the fact that you have written <body></boyd> instead of <body></body>
If your body has no content, it will have no height and the gradient will be shown as a small line (based on the default padding/margin on the body element) and repeated by default. You can see what's being repeated by disabling the repeat like this:
body {
background: linear-gradient(to bottom right, red, blue);
background-repeat: no-repeat;
}
To work around this, add a min-height to the body:
body {
background: linear-gradient(to bottom right, red, blue);
min-height: 100vh;
}
image2 is a wallpaper size jpg and image1 is a small image.
Why did image1 scale larger and how do I display it in its original size on top of image2?
html {
background: url("image1.jpg") no-repeat, url("image2.jpg") no-repeat center center fixed;
}
Your question isn't super clear but I will do my best to help.
First I would check out this article about background image stacking it will help you in terms of the order:
https://css-tricks.com/stacking-order-of-multiple-backgrounds/
I would suggest you need to do the following:
html {
background:
url("image2.jpg") no-repeat center center fixed,
url("image1.jpg") no-repeat;
}
You may also need a fallback depending on browser support.
If you can provide a codepen it would help
try something like
html {
background:
url("image1.jpg")
no-repeat;
}
.image2 {
url("image2.jpg")
no-repeat center center fixed;
}
<html>
<div class="image2"></div>
</html>
The answer is html tag background image will always stretch no way around it.
I am trying to use the graphic below and I would like to repeat from the right to continue on the boards. What would my best options be?
You can make this image the background of an css element and set property repeat-x.
background: url("paper.gif") repeat-x;
You can use background-position property, like this:
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-position: right 0;
background-repeat: repeat-x;
}
http://jsfiddle.net/72p5h6hs/2/
Repeating the background might look a little funny so as an alternative you can use background-size:cover to make the image stretch the whole width of the screen.
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-size: cover;
}
I have a textbox that is formatted through a background-image. Now, when some AJAX processing is happening, I want to display a spinning icon in the bottom right of the textbox. I can add the class to the text box when this happens, but it obviously replaces the background.
.suburb-loading {
background: url('/images/loading_spinner.gif') right center no-repeat;
}
Is their a way to overlay 2 backgrounds? Or what is the best way here to overlay the image over the background?
Use CSS multiple backgrounds by just separating them with a comma
.suburb-loading {
background-image: url('1.png'), url('2.png');
background-repeat: no-repeat, no-repeat;
}
Demo
Fiddle CSS
input {
background-image: url('http://www.melabev.org/images/spinner.gif?1331633304'), url('http://1-art.eu/images/backgrounds/vellum/vellum-old-vellum-background2.jpg');
background-repeat: no-repeat, no-repeat;
background-position: center right, 0 0;
height: 35px;
}
You can either make use of CSS3 Multiple Background feature, but you should know that this will not work in all browsers, Or you can create another div overlaying the original one like with absolute position and this will work for old browsers those don't support multiple backgrounds
i was looking forward to some designs as done here.
how is it possible for the background to remain static and the content to move over it??
background-attachment: fixed
You can find this sort of stuff out easily by using a tool that lets you examine the CSS applied via the browser, such as Firebug for Firefox or Web Inspector for WebKit.
Looking at source :
html {
background: transparent url(http://images.freewebs.com/Members/Generationz/CSSStyles/Elements/Water/bg-body.jpg) repeat fixed 0% 0%;
}
It's the "fixed" attribute.
background: transparent url('http://file.jpg') repeat fixed top left;
fixed is the key.
CSS and Backgrounds
<body bgproperties="fixed" background="image">
or
body {background-image: url(../images/tile.gif); background-attachment: fixed; }
You should have:
background: transparent url('image path here') repeat top left;
background-attachment: fixed