I have a link and an image. I would like to use css absolute positioning to position the link on the image but if i use css absolute positioning then the link will not be properly positioned if the user is using a bigger monitor or a smaller monitor. How could I make it so that it would work on all monitors and be positioned correctly.
Option one is really daft, but just move the link so it wraps around the image?
<img src="http://placehold.it/350x150">
The other alternative (if you can't do that), is to make sure they are in the same parent element that is position: relative;:
#container {
position:relative;
width:350px;
height:150px;
}
#container a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div id="container">
<img src="http://placehold.it/350x150" />
</div>
Make the image a background image, reformat as below, if possible. (this is a better practice)
Is there a reason it MUST be a foreground image? Let me know and I might have a suggestion specific to that!
#divwithimage {
background: url("../images/sweet.jpg");
background-repeat: no-repeat;
width: 500px;
height: 500px;
position: relative; // as this will act as parent
}
button {
position: absolute; // absolute to container above
left: 0;
top: 0;
width: 200px;
height: 40px;
background: pink;
}
Related
I want to put two images together like
enter image description here
with responsive.
I used relative position for this, but whenever screen become smaller, it goes like this
enter image description here
I want to use two different images because I'm gonna animate these seperately.
.img_box{
width: 100%
}
.desk {
position: relative;
width: 90%;
bottom:-30%;
}
.person {
position: relative;
width: 90%;
bottom:20%;
right: 25%;
}
<div class="img_box">
<img class="desk" src="https://material.angular.io/assets/img/examples/shiba1.jpg">
<img class="person" src="https://material.angular.io/assets/img/examples/shiba2.jpg">
</div>
I tried to use absolute, but it doesn't work well for responsive I think
I would suggest creating a new stacking context by adding position: relative; to your .img_box wrapper element, then absolutely position any images ("layers") that you use inside of that new stacking context.
For example:
.img_box {
/* Setting to position: relative creates a new stacking context */
position: relative;
width: 100%;
max-width: 400px;
}
.img_layer {
/* Positions absolutely each payer inside the .img_box stacking context */
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.person {}
.desk {}
<div class="img_box">
<img class="img_layer desk" src="https://assets.codepen.io/817230/back.gif">
<img class="img_layer person" src="https://assets.codepen.io/817230/front.gif">
</div>
This way, adding position: absolute; to any layers will set their position relative to their parent (and not the document). You will be able to position/scale your wrapper element however you'd like and all children will follow suit accordingly.
You can still use .person and .desk for additional styling on the respective layers and/or setting z-index, etc., which is why I left them.
If I understood it correctly, you want to align the images to the center, both vertically and horizontally. You also want to move them together, I mean, without creating some offset between them when you resize the window. So, I would do something like this:
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container {
position: relative;
height: 100vh;
width: 100vw;
}
.desk {
width: 30%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.person {
width: 30%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
for an HTML like this:
<body>
<div class="container">
<img class="desk" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="" />
<img class="person" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="" />
</div>
</body>
Take a look at
CSS Layout - Horizontal & Vertical Align to learn more about the CSS alignment, and
Layout and the containing block to learn how percentage values are calculated for positioned elements.
Hope this image explains more, what I want
(The transparent part of the image should indicate it is bigger than the .content Div :-)
Is there an almost save way (preferably just CSS) to let a background image start at the center?
background-position: center top;
… would use the image's center, not the left corner.
I can't manipulate the image itself (using a transparent offset) nor use absolute values.
You won't be able to do this with a background image on the desired element without using absolute values. See this answer for an illustration of why. In a nutshell, background positioning with percentages and keyword values works much like a sliding puzzle, keeping the image strictly within the element's background positioning area. Only absolute values are exempt from this behavior.
You could cheat by making the image a background of a pseudo-element of the desired element instead, but this requires the desired element to be relatively positioned and act as a containing block for all absolutely positioned descendants, including the pseudo-element:
.content {
position: relative;
height: 200px;
border: 1px solid;
}
.content#one { width: 100px; }
.content#two { width: 200px; }
.content::before {
content: '';
position: absolute;
left: 50%;
width: 50%;
height: 100%;
background: url(http://placehold.it/150x150) no-repeat;
}
<div class="content" id="one"></div>
<div class="content" id="two"></div>
Can be done with pseudo elements
.cimg {
border: 1px solid black;
height: 400px;
position: relative;
}
.cimg::after {
content: "";
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 50%;
background-image: url("http://www.youramazingplaces.com/wp-content/uploads/2014/06/sunset-5.jpg");
background-repeat: no-repeat;
background-size: 400px;
}
<div class="cimg">
</div>
For a project I have to create a pear-shaped container. I tried doing this using CSS3 rounded corners but it just doesnt look exactly like it. I then used an image at the bottom, but I need this to be responsive (scalable image).
I want to code something like:
http://tinypic.com/view.php?pic=98fxid&s=5
But as you minimize the browser screen, the layout breaks and the pear shape is not scalable. I would like to know if there is a way to do this using CSS3 OR a better way to do this using scalable images.
By the way, I'm using bootstrap and this is my first attempt at making a website using bootstrap, so any guidance would be much appreciated.
You could create the pear shape using two intersecting circle segments, one for left-hand side and one for the right-hand side. Circle segments are created by limiting the circle to its parent container via overflow: hidden;. To simplify the markup, you can create the child circle elements using the :before and/or :after pseudo elements.
HTML:
<div class="content-form">
<div class="pear-shape left"></div>
<div class="pear-shape right"></div>
</div>
CSS:
.content-form {
width: 75%;
max-width: 325px;
height: 200px;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
position: relative;
}
.pear-shape {
overflow: hidden;
width: 50%;
height: 200px;
position: relative;
top: 100%;
}
.left { float: left; }
.right { float: right; }
.pear-shape.left:before {
position: absolute;
left: 0;
top: 0;
content: '';
width: 200%;
height: 100%;
border-radius: 0 0 0 250px;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
}
.pear-shape.right:before {
position: absolute;
top: 0;
right: 0;
content: '';
width: 200%;
height: 100%;
border-radius: 0 0 250px 0;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
}
Check out this example Fiddle.
At some point, you will be able to use the css shapes module, and there might be some browsers that already support it. In the mean time, you might want to look at SVG or canvas as an option.
I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.
.box:before {
background: url(images/body_background2.png) no-repeat;
display: block;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
content: '';
}
Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.
See the following article for further information: How Do you Stretch a Background Image in a Web Page.
If you wish to use an image as a background for a given <div> try the following approach:
<div class="fullbackground">
<img class="fullbackground" src="yourImageSrc" />
</div>
.fullbackground{
position:relative;
}
img.fullbackground{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:100%; /* alternative: bottom:0; */
}
I use this article often to do my full screen backgrounds :)
http://css-tricks.com/perfect-full-page-background-image/
Using the AlphaImageLoader filter and setting the sizingMethod to scale seems to do the trick according to Perfect Full Page Background Image.
HTML:
<img class="fullscreen" src="fullscreen.jpg" />
CSS:
img.fullscreen {
border: 0;
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1001;
}
Have a look at https://github.com/louisremi/background-size-polyfill. This is a nice plugin another member of my team came across for the same issue.
Once you have the script included into your solution, add the following line into the relevant CSS class along with any other sizing/positioning attributes you may wish to add.
-ms-behavior: url(/scripts/backgroundsize.min.htc);
We have this implemented for full width images and widget backgrounds and it works a treat.
This (demo) does the trick (digestable version of css-only technique #2 from http://css-tricks.com/perfect-full-page-background-image/):
<div class="background-size_cover">
<img src="images/body_background2.png">
</div>
and
.background-size_cover {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
position: relative;
}
.background-size_cover img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
position: absolute;
}
You'll want to make sure that the parent div is overflow: hidden; besides having whatever dimensions you want the image to get stretched to fit in.
I combined AlfaImageLoader filter with css3 background-size and worked on all browsers. Here's what i did.
background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/background.jpg',sizingMethod='scale');
By the way, you need to put your background image to your wrapper div in this method.
I have a image that I would like to position other images on. For example players on a basket ball court
What is the best way to do this with CSS, I am tempted to do this with tables but fear there maybe a better solution out there
If you use tables I'll castrate you :)
So on with divs and CSS:
HTML:
<div id="bb-court">
<div id="player-1">
</div>
</div>
CSS:
#bb-court {
z-index:1;
}
#player-1 {
z-index:2;
background-image: url();
position: absolute;
margin: top right bottom left; /* All with reference to parent */
}
There are only better solutions than tables for this :).
What you're looking for is called absolute positioning. It means that you can grab an element, take it out of the document flow and define its coordinates (left, top). By default, 0,0 coordinates start at the top left corner of the browser area.
Let me give you an easy example. Here we define everything as divs:
<div id="court">
<div class="player" id="john_smith">
<div class="player" id="gunter_kreitzsch">
</div>
And the CSS that goes with it:
#court {
position: relative; /* makes the top left corner of court 0,0 */
width: 500px; height: 500px; /* define size */
background-image: url(court.jpg);
}
.player { /* definition for player divs */
position: absolute;
width: 20px; height: 100px;
}
#john_smith { /* individual player definition */
top: 30px; left: 50px; /* defining where the player should be */
background-image : url(john_smith.png);
}
You can create multiple divs and use css to style it kind of like this (may not be accurate as I am just going off the top of my head)
<div class="court">
<div class="player"></div>
<div class="ball"></div>
</div>
#css
.court {
float: left;
position: relative;
background: url(../images/court.png) no-repeat;
width: 400px;
height: 200px;
}
.court .player {
position: absolute;
left: 5px;
top: 10px;
}
.court .ball {
position: absolute;
left: 5px
top: 10px;
}
Remember this is a quick mock, I would suggest going down this route and using Firebug for firefox to debug and get the positioning you want.