<style>
background-image: url(".....");
</style>
The background tends to be blank when I use this snippet.Is there any other way to get background image for my page ?.
The background tends to be blank when i use this snippet
That's because you haven't specified the tag in which you want to
apply the background image to.
you haven't specified a valid path to the image.
Simply do something like below but of course replace the URL with your own:
body {
background-image: url("paper.gif");
}
You need to specify which element you want to give the background.
Either you give the element a class or a id or something like body.
.class {
background-image: url("http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Logos%20Wikipedia.ico");
}
#id {
background-image: url("http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Logos%20Wikipedia.ico");
}
body {
background-image: url("https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png");
}
<div id="id">Test1</div>
<div class="class">Test2</div>
Also you can write it inline
<body style="background-image: url('img/bg.jpg')">
You need to specify the tag, class, or id you want the background-image to be in. Example
body, .class, #id {
background-image: url("img.png");
}
or inline-style
<div style="background-image: url('something.gif')"></div>
You also need to be sure of the image path of the image you want to put
for instance if image is in the same folder as css or html say
body {
background-image: url("image.png");
}
if in a folder outside the css folder
body {
background-image: url("../foldername/image.png");
}
and so on
Related
I want to set a background image for the body using image-set() by using this snippet :
body {
background-image: image-set(
"./images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg"
);
}
But the body stills white.
However, when I use url() the body changed its background.
body {
background-image: url("./images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg");
}
You are missing url and consider the prefix. Don't forget the the resolution like stated in the MDN doc:
Every image within an image-set() must have a unique resolution.
body {
background-image: -webkit-image-set(url("https://picsum.photos/id/1/200/300") 1x);
}
You still need to add the URL
body {
background-image: image-set(
url("./images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg")
);
}
Is it possible to set the background image programatically?
I know how this can be done using css however this sets and fixes the background image. I have a model of books each with an image of the book and I would like to set the background to the book's image when the user fetches the book record.
def show
#book = Book.find(params[:id])
#image = #book.image
# set the background image to #image
end
Try to add this in your view (ex. show.html.erb or index.html.erb ):
<style media="screen">
.image_div { background-image: url(<%= #book.image %>); }
</style>
#book.image needs to return the actual path to the image of #book object, you'll need to access whatever property stores the path #book.image.path or #boook.image.url or whatever fits your codebase
Try this:
#pic {
width: 100%;
height: auto;
}
<img src="" id="pic">
So I'm having a view that uses a layout and I wanted to change the css for body for just him, and i stumbled upon this solution:
Top of my view:
#{
ViewData["PageId"] = "Login";
}
Css:
body#Login {
padding-top: 0;
background: #000428;
background: -webkit-linear-gradient(to left, #004e92, #000428);
background: linear-gradient(to left, #004e92, #000428);
}
But when I decided I wanted to change the css for the html too, it didn't work?
html#Login {
overflow-y: auto;
}
Can someone explain how that even works, and why can't there be any space between body and #Login
Your selector requires the body tag having a Id called Login like this:
<body id="Login">
This is the Target Element of your Selector
</body>
So if the body doesn't have this Id, the selector didn't match. A non-matching example could be this one:
<body>
This element has no Id called Login and so Css wouldn't apply
</body>
You could overwrite the body with some additional Code, that's right. But keep in mind, that the order matters in CSS! So you've to include your second code after the original CSS code, which you want to overwrite. When the CSS is loaded in the _Layout file, you could use a section for example, to make sure that it's applied after the shared CSS to overwrite it:
<link rel="stylesheet" rel="css/master-shared-stylesheet.css">
#RenderSection("AdditionalPageCss")
Then you can do something like this in the View, where you want to overwrite master-shared-stylesheet.css:
#section AdditionalPageCss {
<style type="text/css">
/* Overwrite */
body {
overflow-y: auto;
}
</style>
}
I'm trying to change img src (not the background img src) with css
<img id="btnUp" src="img/btnUp.png" alt="btnUp"/>
#btnUp{
cursor:pointer;
}
#btnUp:hover{
src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}
You can use :
content: url("/_layouts/images/GEARS_AN.GIF")
There is another way to fix this : using CSS box-sizing.
HTML :
<img class="banner" src="http://domaine.com/banner.png">
CSS :
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://domain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
http://css-tricks.com/replace-the-image-in-an-img-with-css/
you could try something like this
<img id="btnUp" src="empty.png" alt="btnUp" />
or
<div id="btnUp" title="btnUp"> <div/>
#btnUp{
cursor:pointer;
width:50px;
height:50px;
float:left;
}
#btnUp{
background-image:url('x.png')
}
#btnUp:hover{
background-image:url('y.png')
}
You can use CSS to a) make the original image invisible by setting its width and height to 0, or moving it off-screen etc, and b) insert a new image in its ::before or ::after pseudo-element.
That will be a performance hit though, as the browser will then load both the original and the new image. But it won't require Javascript!
You can't set the image src attribute via CSS. you can get is, as if you wanted to set use background or background-image.
No - CSS can only be used to change CSS background images, not HTML content.
In general UI elements (not content) should be rendered using CSS backgrounds anyway. Swapping classes can swap background images.
You can use a mixture of JavaScript and CSS to achieve this, but you can not do this with CSS alone. <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" />
Instead of img you would put file name sans file type.
function change(img){
document.getElementById("btnUp").src= img + ".png";
}
function changeback(img){
document.getElementById("btnUp").src= img + ".png";
}
Then you use CSS to modify the img tag or the id to your liking.
You could set the image to a completely transparent image, then change the background image like so:
img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}
The images do have to be the same size though. :(
Hope this helps!
content:url('imagelinkhere');
This is working, I tested it
This is an example of code in CSS:
block {
margin-left: 1in;
margin-top; 1in;
position: absolute;
background-image: url('../images/myimage.png');
background-size: 100% 100%;
}
Now I am using this CSS file on more than one HTML page and there need to be able to change this image per page. Maybe through HTML?
<block><somehowchangeimagehere></somehowchangeimagehere></block>
? Please, only HTML & CSS.
One way to handle this is to put a class on the BODY tag for each page, then make different subclasses:
<body class="pageOne">
CSS:
.pageOne block {
background-image: url('../images/myimageOne.png');
}
.pageTwo block {
background-image: url('../images/myimageTwo.png');
}
The image URL is relative to the CSS page URL, not the HTML page URL. It should just work.
If you insert something like this in your html after you include the stylesheet you can override the stylesheet:
<style type="text/css">
block {
background-image('some_image_thats_specific_to_the_page');
}
</style>