If I have url like :http://imageurl/image.jpg?w=160&h=160
Is there a way to specify the width and height parameters to background-image:url with the height and width of other div?
.thumb{
border:1px solid red;
display:inline-block;
height:300px;
width:300px;
}
.thumbnail{
background-size:100% 100%;
background-repeat:no-repeat;
background-image:url(http://imageurl/image.jpg?w=thumb.width&h=thumb.height)
}
This is not possible with the standard css, that is static. So you would need javascript or a css preprocessor like http://lesscss.org/. So you could make the css dynamic.
You could do it by using an actual image intead of a background-image and setting the image to use object-fit: cover;
.thumb{
border:1px solid red;
display:inline-block;
height:300px;
width:300px;
}
img.thumbnail{
width: inherit; height: inherit;
object-fit: cover;
}
<div class="thumb">
<img src="https://placehold.it/400x600" class="thumbnail">
</div>
Related
I have a background-image that is 800x480 pixels. When my element has a fixed size I see the background-image, but not when the element has a relative size or a max-width.
Working CSS script
.audio-container, .settings-container {
max-width:800px;
height:480px;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
CSS script with no background image showing
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
What can I do to show the background-image yet have the element sizes relative to the browser window?
By request, here are the parent DIVs
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Here are the parent DIV CSS styles
.main-guy {
position:absolute;
/* Same result if width and height are set to a fixed number */
width: 100%;
height: 100%;
margin: auto;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
}
You have to change the position:absolute in .settings-container to position:relative as your image in this case act as a Child for .settings-container and the image should be according to its parent. So Position:absolute will not work.
Check the snippet
.main-guy {
position:absolute;
width: 100%;
height: 100%;
margin: auto;
background:#999;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
background-color:blue;
}
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
background-image:url(http://reservations.life/css/images/bg-01.jpg);
background-repeat: no-repeat;
background-size: cover;
position:absolute;
}
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Using the following HTML:
<div class="settings-container"></div>
With the following CSS:
html, body { height: 100%; margin: 0; padding: 0; }
.settings-container {
width: 100%;
height: 100%;
text-align: center;
background-image: URL("your-image-here");
background-repeat: no-repeat;
background-size: cover;
}
Results in a background taking up 100% of the width and height of the viewport. It's difficult to solve your question properly without seeing the whole picture, but my guess is that you will need to apply height somewhere else in your document.
You may also run into issues with using position: absolute, but again that largely depends on the broader picture of how you're applying this to your site/application/whatever.
I have this site
https://preview.c9.io/pgonzalez/demo-project/html/test.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io
The logo at the top is an image, I'm using this technique
h1{
position:relative;
}
span{
width:100%;
height:100%;
position:absolute;
background-image:url(Images/headertext.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header>
<h2>
<span></span>
The rainy season
</h2>
</header>
and it works as I expect. However, the same technique doesn't work here
https://demo-project-c9-pgonzalez.c9.io/html/API.html
You will see how the background image shows twice and in a completely different position, the code I'm using is the same
h1 {
position: relative;
}
span {
width: 100%;
height: 100%;
position: absolute;
background-image: url(Images/headertext.png);
background-repeat: no-repeat;
Can't figure out what is causing this. Thoughts?
It is because there is another span on the page.
You want:
h1 span {
width: 100%;
height: 100%;
position: absolute;
background-image: url(Images/headertext.png);
background-repeat: no-repeat;
}
And probably want to reference it more specific than that. You CSS will add that background to ANY span on the page. What I posted above will only affect spans that are children of h1 tags.
This is because one page header is defined as such, which doesn't work:
#headertest{
position:absolute;
width:100%;
height:100%;
background-image:url(../Images/developerstitle.png);
background-repeat:no-repeat;
}
And on the other page that this technique does works is defined as:
header{
color:white;
background-color:black;
padding:10px;
text-align:center;
background-image:url(Images/headerbackground.jpg);
background-attachment:fixed;
background-position:center;
}
My guess is that the Position statement must be changed/removed.
I want to use a background image to my section element with width:100% and height:40%.
So i used CSS3 and used this solution:
background-image: url(My_Local_Image);
background-repeat: no-repeat;
background-size: 100% 40%;
background-position: center top;
It worked nice!
My problem now is that i want the background-image to be cropped to fit the size i specify. Now image is streched to fit.
Is there ant way that i can achieve this?
FIDDLE
Unfortunately you cannot do something like
background-size: cover 40%;
cause you'll loose the 100%
the solution would be so make a separate image container, and after it an element for your (I suppose) text, setting simply background-size: cover; for the image container,
setting also width: 100%; and height : 40%; for the same.
But what you can do is
LIVE DEMO
<section>
<div class="sectionImage" id="first"></div>
<div class="sectionContent">1</div>
</section>
<section>
<div class="sectionImage" id="second"></div>
<div class="sectionContent">2</div>
</section>
<section>
<div class="sectionImage" id="third"></div>
<div class="sectionContent">3</div>
</section>
section{
background:#444;
position:relative;
margin:10px auto;
height:300px;
width:800px;
color:#fff;
}
.sectionImage{
width: 100%;
height:30%;
background: transparent none no-repeat center center;
background-size: cover;
}
.sectionContent{}
#first{
background-image: url('1.jpg');
}
#second{
background-image: url(2.jpg);
}
#third{
background-image: url(3.jpg);
}
If I understand what you're trying to do, simply remove the 40% from your background-size and the image will fill the div at the 800x300px size.
You must place the background container inside your main container. After that you must provide width and height of main containter and make overflow:hidden.
You can then play with main container's width and height to change crop size. (You can use width:40%; and height:100% too)
Here is JSFidde.
HTML:
<section id="first">
<div id="bg"></div>
</section>
CSS:
#first{
height:300px;
width:200px;
overflow:hidden;
}
#bg{
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center top;
width:800px;
height:300px;
}
Use an inner div to get the crop effect:
Fiddle
CSS
#first{
height:300px;
width:800px;
}
#first div{
width:100%;
height:40%;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
background-repeat: no-repeat;
background-size:100%;
background-position: 50% 50%;
}
Use the :before pseudo class
#first:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 40%;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center center;
}
This will give you many CSS options to deal with both bigger/smaller images, stretching/cropping, etc., without messing with the html
the image flow out the div, I expect it fit within the wrap because I've set width to the div wrapper. The image maybe not the same size for all, so I didn't set the img to a certain fix width to maintain it aspect ratio.
demo link
profile-pic-wrap {
width:200px;
height:200px;
border: 5px solid black;
}
img {
width:100%;
}
You left the . out of your class. But event with that (http://fiddle.jshell.net/293mW/1/) the image will pop out of the div. You could add overflow:hidden; to the div, but that will crop the image (http://fiddle.jshell.net/pzDVd/).
You probably want to use a background image instead and the background-size: cover; or background-size: contain; rule. See also https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
jsFiddle example (or http://fiddle.jshell.net/Fhnk8/)
.profile-pic-wrap {
width:200px;
height:200px;
border: 5px solid black;
background-image: url(http://naijaparrot.com/wp-content/uploads/2013/10/mark-zuckerberg-le-fondateur-de-facebook.jpg);
background-size: cover;
}
Here is the correct code to solve your problem. This will resize any image into the container while maintaing the correct aspect ration.
Also, you should try to avoid background-size: cover because browser support is poor for older browsers.
http://fiddle.jshell.net/293mW/4/
.profile-pic-wrap {
width:200px;
height:200px;
border: 5px solid black;
}
img {
width:100%;
max-width: 100%
height: auto;
}
I would like to put an image into a circle.
My code works fine, but if the image is so big, image is not resizing and i don't see anything in the circle.
How can i automatically resize the image to put it into my circle ?
Here is the html code :
<div class="roundedImage" style="background: url(img/desktop/personne.jpg) no-repeat 0px 0px;">
</div>
And here is the CSS code :
.roundedImage {
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
}
And now, here is the result :
To let the background-image fully fill the space that is available you can use background-size: cover;:
.roundedImage {
background: url(http://placehold.it/50x50);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
}
Note that i've added the inline style in the css code.
jsFiddle
Use CSS property background-size to set the size of the image set as a background in your div:
.roundedImage {
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
background-size:90px 0px;
}