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>
Related
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>
}
<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
I want an image to slightly grow in size when hovering over it. I know it's pretty simple, but I have looked for a good hour over other examples and cannot seem to figure out what I am missing. I appreciate the help. These images are saved to my computer.
Scope
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>
<body>
<img src ="alarm clock2.jpg"/>
<p> Pulling the sheets into my body, I begin to sink back into the bed...
uggh... my alarm clock... time to get up..
<img style = "position:absolute; top:300px; right: 0px; z-index:1"
src="computer.jpg"/>
<IMG ID="grow" STYLE= "position:absolute; TOP:1157px; LEFT:599px;
WIDTH:47px; z-index:2; HEIGHT:47px" SRC="icon2.gif"/>
</body>
</html>
And here is the stylesheet.css
#grow:hover {
width: 100px;
height: 150px;
}
Inline styles have priority over CSS i believe.
Change your CSS and HTML to the following:
#grow {
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover {
width: 100px;
height: 150px;
}
HTML:
<IMG ID="grow" SRC="icon2.gif"/>
The inline style which declared in the HTML element has a higher priority than other css rules. So consider make your rules !important or move the inline style out.
Anyway, the !important rules are not recommended to use regularly. So you have better remove your inline styles and put them in .css files (or at least <style> element inside <head>)
Try this style
#grow:hover {
width: 100px !important;
height: 150px !important;
}
Because you have written inline styles. In order to override it you need to add !important to the styles. Also try to write the html in lowercase and avoid unwanted spaces.
The best thing you can do is avoid inline style and write style as below:
#grow
{
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover
{
width: 100px;
height: 150px;
}
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
I don't know if there's a different Css usage in Asp.net but I just can't make it work.
I target my .css file with
<link href="Style/Style.css" type="text/css" rel="Stylesheet" />
code. And there are <div> and <table> elements.
The table has an id and its properties in the css file are working normal. But I can't say the same thing about <div> and <a> tags.
Let's take this example:
<div align="center" id="bla">
And I use id in css file in different ways. I first used #bla { } or div#bla or div #bla { }, then I used .bla { } or div.bla { } or div .bla { } with making class="bla" instead of id="bla" in Aspx page, they all did not work.
But when I moved the code from css file to Aspx file between <style type="text/css"><style/> tags, it worked normal.
The same behaviour happens in <a> too. But it does not in <table>.
Is there a different usage? What do I miss?
More info at http://jsfiddle.net/npTc6/
It could be a pathing issue to your CSS file. If you have multiple CSS files, it could also be the order of your CSS files. You should verify that you have the correct path to your CSS file and that you have the correct file name referenced in your code. Often, the most simple mistakes are the most frustrating.
UPDATE:
Your CSS has a space between the "a" anchor and the class name, and I believe you need a leading slash on your image references (if not there already).
Example:
a .Russia
{
display: block;
background-image: url("/Images/Default/Russia.png");
width: 173px;
height: 173px;
}
try...
a.Russia
{
display: block;
background-image: url("/Images/Default/Russia.png");
width: 173px;
height: 173px;
}
It was a problem common in Asp.Net. Just about background properties. Standart CSS background-image code had some issues so there are variations. I tried many, then fixed it by using this one:
background: url(/Images/Default/Turkiye.png);