This question already has answers here:
Is it possible to set the equivalent of a src attribute of an img tag in CSS?
(24 answers)
Closed 7 years ago.
I need to define an <img>'s src attribute in CSS. Is there a way to specify this attribute?
just this as img tag is a content element
img {
content:url(http://example.com/image.png);
}
#divID {
background-image: url("http://imageurlhere.com");
background-repeat: no-repeat;
width: auto; /*or your image's width*/
height: auto; /*or your image's height*/
margin: 0;
padding: 0;
}
No there isn't. You can specify a background image but that's not the same thing.
CSS is not used to define values to DOM element attributes, javascript would be more suitable for this.
No. The closest you can get is setting a background image:
<div id="myimage"></div>
#myimage {
width: 20px;
height: 20px;
background: white url(myimage.gif) no-repeat;
}
After trying these solutions I still wasn't satisfied but I found a solution in this article and it works in Chrome, Firefox, Opera, Safari, IE8+
#divId {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.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 */
}
They are right. IMG is a content element and CSS is about design.
But, how about when you use some content elements or properties for design purposes?
I have IMG across my web pages that must change if i change the style (the CSS).
Well this is a solution for defining IMG presentation (no really the image) in CSS style.
1: create a 1x1 transparent gif or png.
2: Assign propery "src" of IMG to that image.
3: Define final presentation with "background-image" in the CSS style.
It works like a charm :)
Related
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I created a <div> first thing in the <body> to draw a top line at the top of the page:
<body>
<div class="bordertop"></div>
.....
</body>
and the style:
body {
font-family: Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
margin:0;
}
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
}
However, the top_border image doesn't appear unless I write some text inside the <div> but I don't want to. How could I fix this?
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
.bordertop
{
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
height: 100px;
width: 100%; /* may not be necessary */
}
You might need to set the css width and height of your <div> element to whatever size you want
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
width: 200px;
height: 100px;
}
Give the div a height:1px. That should work. Otherwise your div is 0px high, meaning you won't see anything.
You could also give it padding-top:1px
Another thing you could do is to set the background-image of the line on the body in your CSS. This is assuming the line is the entire width of the body.
See demo
As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.
On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.
The best way I have found is:
for landscape:
width:100%;
height:0;
padding-top:[ratio]%;
for portrait:
width:[ratio]%;
height:0;
padding-top:100%;
You need to determine which side is longer and accept this dimension as 100%
then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.
I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.
Example code:
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp
If it is the only div element in the body use the following style to to make it occupy the full-width.
.bordertop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
url('../images/top_border.png');
}
I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.
left {
width: 800px;
height: auto;
min-height: 100%;
position: relative;
background-image: url("../img/loginpic.jpg");
background-size: cover;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: crimson;
}
Otherwise, you can just open a <p></p> and in styles, remove the default margin length, that's margin: 0; and add height: 0.1px which doesn't consume much space, so it'll work.
Note: it'll work properly until it's not zoomed out more than 50%, so make sure of the use case before you apply it to the body.
I have an issue with two different browsers. I have attached snapshots of issues:
When I use the following css I get image1:
.support-data-text img, .support-data-text select {
float:left
}
/* this is for dropdown list */
form#saveSupport select {
height: 29px;
width: 234px;
position: absolute;
}
form#saveSupport input{float: left; width: 243px;}
/* this is for the img we are using for dropdown list */
form#saveSupport .select_game { background: url(../images/select-status.png) no-repeat;
width: 223px; position: absolute; height: 29px; line-height:29px;
padding: 0 0 0 10px; color: #333; font-size:12px; overflow: hidden;
}
and when i add margin-left: 18% to form#saveSupport .select_game Chrome shows proper alignment of dropdown list image but not the actual dropdown list whereas Firefox displace the drodown list to right side. (Image2)
Kindly help me with the solution. I would be thankful!
Thanks,
Vikram
Hi I think you set position:relative to parent element and for child element set position:relative
I think your Parent Div is this
.support-data-text{
position:relative;
}
and now set to child div absolute position and set to left right top bottom according to your design .
Some of the CSS properties acts differently in both Chrome and Firefox.To fix this I used the below solution which worked for me. Add the CSS properties which acts differently in chrome and firefox inside class(same class name which use for chrome css prop as well) which should come under #supports (-moz-appearance:meterbar). The properties which we add within #supports (-moz-appearance:meterbar) will be taken only for Firefox browser.
Example:
#supports (-moz-appearance:meterbar) {
.yourclassname {
margin-bottom: 10px;
bottom: 2px;
}
}
I have my img tag defined with some CSS as:
img
{
width: auto !important;
height: auto !important;
max-width: 100%;
}
It works just fine in some of the Mobile Browsers I have tried, as well as Google Chrome on a desktop. However, it does not seem to work in IE or FireFox. By that, I mean, as you resize the window. Take a look at a sandbox site I am working on: http://terraninstitute.com. I have the image on the home page intentionally set to be a huge picture. Also navigate to the Information (main menu) then Newcomers (side menu) and notice the map image at the bottom. On my Droid (and a few other devices I can get my hands on) as well as in Google Chrome this looks pretty good. In IE and FireFox, not so much.
Am I missing something? Conflicting style definitions? I am not finding them as of yet if it is.
TIA
You're declaring the width of your images multiple times in your document unnecessarily and declaring a max-width the wrong way. Max-width is supposed to define a max size/boundary for your images (600px, for example), if you declare max-width:100% in conjunction with width:100%, you're not really doing anything with that declaration as the images will expand 100% as it is.
Remove the width declarations from your CSS in the following lines:
line 116: delete the img declaration all together, it is not needed.
line 365: remove the max-width:100% and height:auto; attribute as they are not needed (and if you can delete the declaration all together as you can declare that elsewhere)
line 121: Now just stick with this one and just add the following:
img {
height: auto;
width:100%;
}
Bootstrap solution for responsive images:
img {
/* Responsive images (ensure images don't scale beyond their parents) */
/* Part 1: Set a maxium relative to the parent */
max-width: 100%;
/* IE7-8 need help adjusting responsive images */
width: auto\9;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Don't use !important
Make your CSS more speficic:
body img {
width: auto;
height: auto;
max-width: 100%;
}
in style.css line line 116, 212 and in inuit.css line 365. Remove all those.
img{
height: auto;
max-width: 100%;
}
Thats all you need.
i'm trying to use CSS to replace the image in html, so
<img class="flechaTooltip" src="oldpath" />
turns into
.flechaTooltip {
width: 0;
height: 0;
padding: 11px 209px 0 0; /* New image's dimensions here */
background: url(../../nImg/flechaTooltipGris.gif) no-repeat;
/* Removing image from older Opera */
content: "";
display: inline-block;
}
But it doesn't seem to make any effect, any idea why??
-edit-
i have used this technique to replace text for an img, but never tried to replace img for another img
The text-indent only works on inline elements in the flow, so if you'd use it for a line with inline element (or any other inline or inline-block elements) it would work.
However, you can replace an image with another image using CSS if you know the new image's dimensions using the following CSS:
.flechaTooltip {
width: 0;
height: 0;
padding: 50px 300px 0 0; /* New image's dimensions here */
background: url(newpath);
/* Removing image from older Opera */
content: "";
display: inline-block;
}
And here is a jsfiddle for you: http://jsfiddle.net/kizu/kNAgT/4/
No, it doesn't... because an image contains no text to indent.
However, you can achieve the affect you want by wrapping the image in another element, like a p or div.
So
<p class="flechaTooltip"><img src="oldpath" /></p>
Example: http://jsfiddle.net/jasongennaro/v7GyN/