I want to get the grid effect similar to one on the picture. Any ideas?
sample
You need to use background-image property to apply image as background:
div {
background-image: url('http://d1v8u1ev1s9e4n.cloudfront.net/54e5236f5ccacf314d464817');
background-position: center center;
background-repeat: repeat;
height: 200px;
}
<div></div>
Related
I'm trying to apply CSS transformations to an image to achieve the following result:
right half of the image - main image - left half of the image
so that after CSS is applied to the image it looks like a "ribbon" with the image repeating after and before but not fully.
Is there a way to do this without changing the structure of the page (that is without using a div and background property)?
Example:
image to apply CSS to
result I want to achieve
I tried using background and it kinda works
background-image: url(/image.png);
background-repeat-x: repeat;
background-size: 50%;
background-position-x: 50%;
background-repeat-y: no-repeat;
height: 50px;
but I would like to get the same effect without using background rules but rules that apply to the image directly.
I tried also to apply the background rules to the img directly and got this result which could be a good middle-ground solution except for the missing image icon overlapping. The removal of this icon could also do the trick.
result by using background on img
Unfortunately, I cannot change the structure of the page (e.g. by wrapping the image into a div)
If you want to show certain parts of an image it's good practice to go with the background-position property in combination with background-size.
Other method is to cut the images to fit your needs and then display them seperatly.
I suggest you to go with my example:
.image {
height: 400px;
}
.image>div {
vertical-align: middle;
display: inline-block;
height: 100%;
}
.left,
.right {
width: 150px;
}
.left {
background: url("https://news.nationalgeographic.com/content/dam/news/2018/05/17/you-can-train-your-cat/02-cat-training-NationalGeographic_1484324.jpg") no-repeat right;
background-size: cover;
}
.middle {
background: url("https://news.nationalgeographic.com/content/dam/news/2018/05/17/you-can-train-your-cat/02-cat-training-NationalGeographic_1484324.jpg") no-repeat center;
background-size: cover;
width: 300px;
}
.right {
background: url("https://news.nationalgeographic.com/content/dam/news/2018/05/17/you-can-train-your-cat/02-cat-training-NationalGeographic_1484324.jpg") no-repeat left;
background-size: cover;
}
<div class="image">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
I hope you like cats. I do.
It seems that background-position/background-cover is not working with data URI as background images? What I have is a preview of images to be uploaded. To show those previews I am using JS to get the data URI into CSS background images, which I hope to center.
But I notice the following code does not work with a data URI
div {
width: 200px;
height: 200px;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRg...);
}
https://jsfiddle.net/7pfc2vLx/
UPDATE
I notice like many mentioned I am missing background-position in my above example. But seems like even with that it does not work when its an inline style?
<div id="profile-avatar" style="width: 200px; height: 200px; background-position: center center; background-size: cover; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAA
https://jsfiddle.net/7pfc2vLx/4/
If you want to Center an image then try JSfiddle
div {
width: 100%;
height: 200px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QBsRXhpZgAASUkqAAgAAAAD…y5eKCQaVqJ0y7W7JJJ2b6cxwd3MlGwz9mN4vrwL6sTjY+BzMiXWzjSpa2fJRFOu/auHjYv/9k=);
background-position: center center;
}
Maybe I'm missing something in your question, but shouldn't you just add the position?
background-position: center;
Your background already fit the div and if you want to make sure it's in the centre of the div, add:
background-position:center center;
But seem nothing change, because your div is not center itself, so add:
margin:0 auto;
Now they all in center posistion. https://jsfiddle.net/7pfc2vLx/2/
I have been researching for a while to how to get my background image to work on different screen resolutions. After many failed attempts I noticed I can't even get a normal css background in. It's not the file, I have tried different formats.
Code for the different screen resolutions:
html {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
The code the normal background:
body {
background-image: url('Background.jpg');
}
That is strange. Did you check that the path to your image is correct? For example if the image is inside an "example" folder, the path should be "example/myImage.png".
As for a responsive background, I believe you are on the right track, although a simple background-size: 100%; would have been enough. Check this Jsfiddle https://jsfiddle.net/a0mvnj63/
Also try using an external image, like in my example, just in case.
Try to use your code like this background-image:url('../background.jpg'); with height: 100vh;
body {
padding: 0;
margin: 0;
height: 100vh;
background-image: url(http://static.tumblr.com/295a1562899724d920b2b65ba33ffb76/vouqyzj/f2Dna5qb8/tumblr_static_197ahk99f1z44ogskg4gw4c80.jpg);
background-size: 100% 100%;
background-position: center;
}
h1 {
text-align: center;
color: #fff;
}
<body>
<h1>Hello Universe</h1>
</body>
only background elements does not give height and width to any div or html.
try giving some height and width to your code. just like
html { background: url('background.jpg') no-repeat center center fixed; height:500px; width:500px; }
or just put some data on body so you get auto height width according to contain and get image in background.
I have the below code and I'm trying to add an attribute to center the background but it's not working.
Existing Code:
<div class="av-section-color-overlay" style="opacity: 1; background-color: #000000; background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg); background-repeat: repeat;"></div>
Existing CSS:
opacity: 1;
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: repeat;
}
The CSS I tried to add is:
.av-section-color-overlay {
background-position: center center !important;
}
The website is http://andytraph.com/ and I'm trying to center the full-screen Avatar image
I would suggest not repeating the background, but letter-boxing it in the container, which looks way better. Center works:
{
opacity: 1;
background-color: #000000;
background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
There are a few competing problems here:
There is no content inside the element you are working with, so the background image is getting clipped as a result.
The background image is very large, so it is difficult to see the desired centering without either 1) setting the DIV element to a relatively larger height / width, or setting the background-size CSS property.
The concepts of background-repeat: repeat and background-position: center constitute competing desires. You can't really both center an image, and tile it indefinitely in both directions.
So in light of the above, if you apply a few further style modifications, you get your desired behavior with what you specified: background-position: center. (If you want to center in both directions, you don't need to expressly state it twice -- it is implied that you want to use it in both directions if there is only a single value.)
Something like:
.av-section-color-overlay {
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: no-repeat;
background-size: 100px;
background-position: center;
height: 200px;
width: 200px;
}
and:
<div class="av-section-color-overlay"></div>
Example: https://jsfiddle.net/7mpqfd22/2/
The Fiddle isnt rendering the exact grid properly but it gives you an idea of what I'm going for. Each div has a fixed background image. The problem is each background image is defaulting to the top left corner, even after trying to reposition the image using background-position.
https://jsfiddle.net/hLu7gvo3/
The styling looks like this
#thumb1{
background-size: cover;
background-position: center;
background: url("../img/gal1.png");
background-attachment: fixed;
background-repeat: no-repeat;
}
.gallerythumb {
color: white;
position: static;
float: left;
width: 33.333vw;
height: 100vh;
}
and the html as you'd imagine
<div class="gallerythumb" id="thumb2">1</div>
I tried setting the sizing property as container but that didn't do much. Anyone have any clue how to center the background image within the div?