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.
Related
i have a problem to insert my picture, i have a 404 error, though i thought that my path was correct.
my files are :
main-menu
phone.png
_menu.scss
in my file _menu.scss, i have the next code :
.phone {
background-image: url(phone.png);
}
.phone is the name of my class. i work with drupal and twig.
thank you for you help and sorry for my english.
When added as background in div, 'height' and 'width' must be added for the background image to appear.
it is don't showing:
.phone {
background-image: url(https://picsum.photos/300/300);
}
<div class="phone"></div>
but it is showing:
.phone {
background-image: url(https://picsum.photos/300/300);
height:300px;
width:300px;
}
<div class="phone"></div>
If your file tree is right, then all you need to do is add a width and a length. You are not telling the browser how tall and wide to make the phone, so it will show nothing.
.phone {
background-image: url(phone.png);
width: 500px;
height: 600px;
}
<div class="phone"></div>
I don't have your phone.png, but it should be like so.
Solution
There are two ways of importing an image.
1. Using HTML tag.
2. Using CSS background.
When using css version, don't forget background-size and background-position.
Example:
.image {
background: url('path/to/img.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center center; /*positions the image in the center*/
width: auto;
height: 50px;
}
<img src="path/to/img.png" />
<div class="image"></div>
sorry, but i have always the same problem:
my TWIG code:
<div class="col-6">
<div class="phone">
</div>
and my SASS code:
.phone {
background: url('phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
and my files are always the same too:
main-menu
phone.png
menu.scss
i have always the 404 error
thank you
Maybe you can try: ./phone.png.
.phone {
background: url('./phone.png') no-repeat;
background-size: contain; /*This scales the image accoding to the div*/
background-position: center; /*positions the image in the center*/
width: auto;
height: 50px;
}
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/
I at least got the following to render the image, but when the window is resized past a certain point: part of the image gets cut off.
#header {
background-image: image-url('my_header.png'); #image-url is a helper in rails
background-repeat: no-repeat;
height: 100px;
background-size: 100%;
border-radius: 1em;
}
And then showing how I specify the image at the top of the body in application.html.erb:
<body>
<div id="header"></div>
</body>
What I want to happen is for the image to scale proportionality but not get cut off. I do not want any specific height set. I want it to automatically scale as needed (however, I wasn't able to get the image to render unless I specified the height with px).
#Pangloss deserves recognition for providing a fantastic answer at this jsfiddle which he referenced in the comments.
Here is his css:
#header {
background-image: url('http://i.imgur.com/zOZVQaf.jpg');
background-repeat: no-repeat;
background-size: contain;
border-radius: 1em;
border: 1px solid blue;
}
#header img {
display: block;
visibility: hidden; /*hidden but reserve the space*/
width: 100%;
height: auto;
}
And the html:
<div id="header">
<img src="http://i.imgur.com/zOZVQaf.jpg">
</div>
#Pangloss provided this answer in the comments. If/when he posts an answer to this question, I will switch it over to his answer.
Need some help with CSS background repeat. Below is the wire-frame for the functionality I am trying to achieve.
Current Code:
HTML:
<div class="wrapper">
<div class="container"></div>
</div>
CSS:
.container{
min-height: 10000px;
background-image: url(background1.png), url(background2.png);
background-repeat: no-repeat, repeat-y;
background-position: center top, center 1000px;
}
The current code displays background1 only one time and repeats background2 as I want,but the background2 image starts from the top of the page. I want it to start exactly after the background1 image ends as shown in the wireframe.
NOTE: Both the images background1 and background2 have transparent shapes in them which makes makes the other image visible in the background.
If you set a background to repeat, it can not be limited (AFAIK)
the solution would be to limit it to a pseudo element, and limit this pseudo element to where you want it (with the top property)
.test {
width: 300px;
height: 600px;
border: solid black 1px;
position: relative;
}
.test:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 200px;
background-image: url(http://placekitten.com/g/600/400);
background-repeat-y: repeat;
}
<div class="test"></div>
Note that the height of 100% is not accurate, if you want it to be accurate set it to your dimension
I've asked this question before and got a solution but as I work my way into it, I found out that the solution wasn't the best (the suggestion was to set both into display:table-cell)
As I add in divs within, the height changes and the layout gets out of hand.
what I want is really simple, something like the image shown
[EDIT : this is the main reason why i'm having problem, i'm trying to add a div to include a shadow ]
I want the textured BG to stretch all the way, as tall as how the page would be (so as the content varies the textured bg would follow)
So I made something such as
<body>
<div id="page">
<div id="sidecolumn">
<div id="sidebar"></div>
</div>
<div id="maincolumn">
<div id="content"></div>
</div>
</div>
</body>
by setting all the divs and body style to have height:100%; but the problem is that as my content stretches beyond the page limits (a scroll bar appears) the textured BG doesn't flow over, it just stop at where it was. Say the screen is of 800px tall, if the content goes beyond and reaches 1000px, the textured bg stops at 800px.
As I tried what was recommended for me by using display:table-cell, the textured bg flows with the content, but I can't add in my side bar because when I do, there will be a blank space above the content div. Any suggestion on how I should handle this problem?
EDIT: Using Xun Yang's approach would work. It's just, as he put it himself, unconventional ;)
The fiddle: http://jsfiddle.net/Nu2wH/
html, body {
height: 100%:
padding: 0;
margin: 0;
}
#page {
background: #444444;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
background: url("http://upload.wikimedia.org/wikipedia/commons/3/3e/Social_icons-google-22x22.png?uselang=de") repeat;
}
#sidecolumn {
width: 45%;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
float: left;
}
#sidebar {
background: #ddd;
}
#maincolumn {
padding: 5%;
width: 40%;
float: right;
background: #AA9933;
height: 100%:
}
#content {
background: #ddd;
}
You Can Use the css 3 declaration background-size, for all browsers
background: url(images/bg.jpg) no-repeat center center fixed; //fallback for unsupported browsers and sets the background image
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
#page
{
background:url(images/bg.png);
width:200px;/*Width of your sidebar*/
}
#maincolumn
{
margin-left:200px;/*width of your sidebar*/
}
Not very conventional but works :)