I have a question about rounded elements on page. For example I have a small logo which isn't rounded and I want to put it on rounded background (120x120). Is it better to make div like this:
border-radius: 100%;
background-color: red;
background-image: url('logo.png');
background-position: center;
or just create an image in for eg. Gimp?
If you are going to be using the logo on a rounded background in future (e.g. Leaflets, email etc.) it may be easier to create a version of the logo in gimp or alternative, so it can be used anywhere very quickly.
If not it is really just personal preference, each has advantages and disadvantages.
border-radius solution
you can remove the background on some screens if you want to with media queries
quicker to achieve.
background size, color and radius can easily be changed at a later stage.
radius stays high quality/ resolution on any display.
image solution
better browser support.
Useable in future publications.
Two solutions:
Make the div containing the image(background div) have the border radius and make the image width an height of 100% in the div.
.background{
border-radius: 5px;
background-color: red;
background-image: url('logo.png');
background-position: center;
width: 100px;
height: 100px;
}
.img{
width: 100%;
height: 100%;
}
Give the image a border-radius as standalone
.background{
width: 200px;
height: 200px;
}
.img{
border-radius: 5px;
}
Related
I have code to show a background image in a card header like below:
<div class="card-heading"></div>
and in CSS:
.card-1 .card-heading {
background: url("../images/bg-head-02.jpg") center center/cover no-repeat;
padding-top: 210px;
}
In desktop its looking fine like this:
But in mobile device its getting cut off like below:
How can I fix my code so that it also fits in mobile.
The problem: You are using the cover value for the background-size property. This means that the image will be resized to fit either the height or width of the available space, and any "extra" image will be cropped. In your case, the image is being made big enough to fit into the height of your element, which makes it too wide to fit so the width is getting cropped.
Note that using a separate background-size: cover; CSS will not change this behaviour - it behaves the same way as when it is included in the background shorthand. You can see this in the working examples below.
Option 1: background-size: contain If you want the image to fit fully into the space, you can use contain- however note that this will add empty space above and/or below the image because the aspect ratio will no longer match the image itself.
Solution - Option 2: Make the element the correct aspect ratio for the image.
You can use % padding instead of fixed padding.
To calculate the correct percentage use: image_height / image_width e.g. in the example here : 210/1200 = 17.5%
Compare all of these options in the example below:
.card-heading {
background: url("https://via.placeholder.com/1200x210") center center/cover no-repeat;
padding-top: 210px;
border: 1px solid red;
}
.card-heading-cover {
background: url("https://via.placeholder.com/1200x210") center no-repeat;
background-size: cover;
padding-top: 210px;
border: 1px solid red;
}
.card-heading-contain {
background: url("https://via.placeholder.com/1200x210") center center/contain no-repeat;
padding-top: 210px;
border: 1px solid red;
}
.card-heading-responsive {
background: url("https://via.placeholder.com/1200x210") center center/cover no-repeat;
padding-top: 17.5%;
border: 1px solid red;
}
<p><strong>Background: cover</strong> (like your example) - image is cropped</p>
<div class="card-heading"></div>
<p><strong>Background-size: cover</strong> - image is <i>still</i> getting cropped:</p>
<div class="card-heading-cover"></div>
<p><strong>Background-size: contain</strong> - note the extra space</p>
<div class="card-heading-contain"></div>
<p><strong>% padding</strong> - resizes to fit the image aspect ratio</p>
<div class="card-heading-responsive"></div>
I just begun to learn how to use image sprites in order to optimize my site better. However, there is this white border on the right and bottom side of my image element. I searched for posts on here and google and cannot seem to figure out how to remove the border.
I did read it was caused by using the image element, however, I need to use this element for SEO purposes. By using a div it would cripple my SEO in regard to images (from what I have read anyways). Can anyone help me figure this out? It did this in both Chrome and Firefox. Thank you
[White border on right and bottom of image container][1]
<img class="image-sprite" src="">
.image-sprite {
background: url("../images/gallery-sprite.png");
background-color: #3a3a3a;
background-position: -17px -10px;
background-repeat: no-repeat;
width: 360px;
height: 470px;
}
Are you able to put the background URL directly into the img tag in HTML? Like this:
.image-sprite {
background-color: #3a3a3a;
background-position: -17px -10px;
background-repeat: no-repeat;
width: 360px;
height: 470px;
}
body{
background-color: gray;
}
<img class="image-sprite" src="https://w3schools.com/html/img_girl.jpg">
I've posted an example below, see can you find any white space on either side? The problem might be the 'image-size' you using and dimensions that you are placing your image with. If your image finishes by the time it reaches the right end or bottom end, obviously then and only then you'll see the white space, otherwise there is no issue in using sprites. Either increase your image in size, or decrease its width and height.
.image-sprite {
background: url("https://picsum.photos/200/300");
background-position: -10 -10px;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<img class="image-sprite">
I think I have an impossible task but before giving up on this I want to be sure that it's really not possible. Maybe it's possible with millions of media queries, but that isn't worth the struggle.
However, I have a backgroundimage with a height of 100vh, meaning it's always 100% height of the users window, and a width of 100%. These two things might make my task impossible.
Within the background image I have another image which should always be on that position, no matter what.
I came up with an example. I want the rocket always stay on that rectangle on the planet. I made this possible on my screen, but it could slip on your screen due different screen sizes.
(stackoverflow doesn't allow images with http, so please change the image src to http or take a look at my codepen: https://codepen.io/anon/pen/yjXbPL)
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
img {
width: 150px;
position: fixed;
top: 240px;
right: 780px;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png">
</div>
Is this possible?
Use Position fixed as u do.
Use Left and top, not right.
Put the image beside the background div not in it.
Attached codesnippet shows you a solution. It is based on that you put your rocket and background in 2 different divs and stack them by using CSS-index.
Further on, the rocket is positioned fixed and I added a height of the background that makes it a bit scrollable.
Now, to solve the graphical split of the rocket and the background image you would have to create them as 2 different images and place them into each respective div in the HTML (see codesnippet).
In terms of using different devices you would have to test how the rocket might change position and solve that through a combination of media queries, and potentially use % position instead of px (to position the rocket correct):
.background-pic {
position: absolute;
z-index: 1;
width: 200px;
height: 1000px;
background-color: darkblue;
}
.rocket {
position: fixed;
z-index: 2;
width: 50px;
height: 50px;
background-color: orange;
margin: 100px 0px 0px 100px;
}
<div class="background-pic"></div>
<div class="rocket"></div>
The reason why this can be really hard to achieve is because you're using background-size: cover; which means stretch the image while keeping its aspect ratio and crop the image in order to fit its container's height and width. When you combine this with background-position: center center; it will crop on the edges equally. Then finally you're using two different kinds of measurement units: height: 100vh; width: 100%;
The question then becomes, before the image is cropped, what's the new width and height for the image that "cover" is applying?
This is something very difficult for CSS to determine because it requires things like knowing the ratio of your image (2560x1600 has a ratio of 1.6:1), then trying to fit it inside a container of variable width and height such that it is just small enough to fill it, while cropping out anything left out, before it is cropped, what is the actual size of the image?
Both height: 100vh; and width: 100%; will affect its size, in the manner explained above. As this requires comparing the image's original height and width, with the container's width and height to determine how to stretch the image, trying to figure this sort of math out with pure CSS isn't an easy feat for CSS to achieve without some assistance from JavaScript.
A decent solution is to add a bunch of transparency to the rocket image so it has the same size as the background so it can also go through the same "cover" stretching and cropping logic.
Give this a shot:
https://codepen.io/anon/pen/xjrPvM
HTML:
<div class="background" data-comment="2560x1600 has an aspect ratio of 1.6:1">
<div class="rocket">
</div>
</div>
CSS:
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
.rocket {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
background-image:
url('your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png');
}
Within the codepen I used a base64 encoded version of "your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png"
which is just the rocket placed on a 2560x1600 canvas I did in GIMP, transformed it -20.0 degrees moved it around so it's placed where you want it then exported it as a PNG.
Instead of using the image as background, I've used an inline image with the rocket placed on top. Then the rocket and background are made responsive relative to each other.
.background {
position: relative;
}
.background img {
max-width: 100%;
display: block;
}
#rocket {
top: 49%;
left: 47%;
width: 15%;
height: 15%;
background-image: url(http://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg">
<div id="rocket"></div>
</div>
Up to some point, it's possible. Here is my solution for that, I have tried and tested your code. These are the changes to fix your code:
Set the position of the image to fixed:
img
{
width: 150px;
position: fixed;
top: 50%;
margin-top: 20px; (adjust some pixels as per your need)
right: 50%;
margin-right: -90px;(adjust some pixel as per your need)
transform: rotate(-20deg)
}
Here is the complete working example:
https://codepen.io/atulraj89/pen/MGooLr
I'm trying to use this image as part of the navigation bar, but the problem is there are big white spaces around the image and I cant remove it. I've tried setting the margin and padding to 0, it doesn't work.
This is what it looks like:
UPDATE: HTML & CSS CODE
HTML
CSS
2ND UPDATE
I finally solved the problem guys.. thank you to everyone who helped!
you could try to crop the image. Otherwise you can make use of CSS.
For example:
<style>
img {
position: absolute;
clip: rect(0px,60px,250px,10px);
}
</style>
You could use CSS and play around with the background-size & background-position properties, like this:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/sOO9j.png');
background-size: 700px 700px;
background-position: 419px 438px;
border: 1px solid red;
}
<div class="image"></div>
Using the Gimp Image Editor I have cropped your original image and used that as the background instead, this is what it looks like:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/MaYMF.png');
background-size: 120%;
background-position: 112px 115px;
border: 1px solid red;
}
<div class="image"></div>
The image you provided above is way too large, meaning that when you crop it the cropped image will be a low quality image. I'm sure it would be far easier and if you used a software like Gimp Image Editor or Photoshop to modify your image your self to get the specific image you wanted down to the pixel and you could simplify the my CSS to get this:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/sOO9j.png');
background-size: 100% 100%;
background-position: center center;
border: 1px solid red;
}
NOTE: the red border is used to help you better see where the image is.
NOTE: the red border is not required to make this work.
Say, like in this example here: http://www.electrictoolbox.com/examples/wide-background-image.html
When I do it, I end up getting white borders around the image no matter what I do. What am I doing wrong?
If you're hoping to use background-image: url(...);, I don't think you can. However, if you want to play with layering, you can do something like this:
<img class="bg" src="..." />
And then some CSS:
.bg
{
width: 100%;
z-index: 0;
}
You can now layer content above the stretched image by playing with z-indexes and such. One quick note, the image can't be contained in any other elements for the width: 100%; to apply to the whole page.
Here's a quick demo if you can't rely on background-size: http://jsfiddle.net/bB3Uc/
Background images, ideally, are always done with CSS. All other images are done with html. This will span the whole background of your site.
body {
background: url('../images/cat.ong');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You set the CSS to :
#elementID {
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) center no-repeat;
height: 200px;
}
It centers the image, but does not scale it.
FIDDLE
In newer browsers you can use the background-size property and do:
#elementID {
height: 200px;
width: 100%;
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) no-repeat;
background-size: 100% 100%;
}
FIDDLE
Other than that, a regular image is one way to do it, but then it's not really a background image.
the problem is the margin of body his default value is margin: 8px
and i make it margin : 0 so the image stretching and there is no white places