I have a image -- a loading image.
I want that image to be displayed in the center on the page.
How can I do that?
The code I wrote is :
img.loading
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
How can i make this image always be displayed in the center of the page?
Found this: How to Center an Image Perfectly in CSS, might help.
#img
{
position:absolute;
width:592px; /*image width */
height:512px; /*image height */
left:50%;
top:50%;
margin-left:-296px; /*image width/2 */
margin-top:-256px; /*image height/2 */
}
See W3C
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
<IMG class="displayed" src="..." alt="...">
Or you can use background: url(center_image) no-repeat center;
working example: http://jsfiddle.net/DT4hL/
Related
I have a large image centered like this:
I want to image to bleed with a blur on the sides like this:
Is this possible?
Also, is there a particular term used to describe what I want?
I tried adding a background image and blurring that, but then I realized that just blurs everything. I don't know what else to do.
*,
*::before,
*::after{
padding:0;
margin:0;
box-sizing:border-box;
}
.wrapper{
width:100%;
height:100vh;
position:relative;
background:#000;
}
.bg{
position:absolute;
width:100%;
height:100%;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-image:url("https://static.vecteezy.com/packs/media/vectors/term-bg-1-666de2d9.jpg");
background-repeat: no-repeat;
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-item:center;
overflow:hidden;
filter: blur(14px);
overflow:hidden;
}
figure{
position:absolute;
top:0;
bottom:0;
right:50%;
transform:translate(50%);
overflow:hidden;
width:70%;
}
img{
width:100%;
height:100%;
object-fit:cover;
object-position: center;
}
<header>
<div class="wrapper">
<div class="bg">
</div>
<figure>
<img src="https://static.vecteezy.com/packs/media/vectors/term-bg-1-666de2d9.jpg" />
</figure>
</div>
</header>
This may not be the best way to do this, but this at the very least works and doesn't seem to be messing up anything.
What I did was create a container and then stack the same image on top of each other, but set the image at the bottom to be blurred and fill the remaining gaps.
App.js
import './App.css'
export default function App() {
return (
<main>
<div className='container'>
{/* ORDERING MATTERS!! */}
<img className='bleed-blur' src='https://static.vecteezy.com/packs/media/vectors/term-bg-1-666de2d9.jpg' />
<img className='main-image' src='https://static.vecteezy.com/packs/media/vectors/term-bg-1-666de2d9.jpg' />
</div>
</main>
)
}
App.css
.bleed-blur{
/* required to stack images on top of each other */
position: absolute;
/* blur effect */
filter: blur(10px);
/* the size will be relative to the container */
width: inherit;
height: inherit;
}
.container{
/* will cause other content will not be adjusted to fit into any
gap left by the element */
position: relative;
/* you may want to adjust the sizing to your liking*/
width: 100%;
height: 50vh;
/* center images within container */
display: flex;
justify-content: center;
align-items: center;
}
.main-image{
/* required to stack images on top of each other */
position: absolute;
/* the size will be relative to the container */
width: inherit;
height: inherit;
/* you can change this if you need to, but might cuase issues.
Although, `scale-down` seems to work well*/
object-fit: contain;
}
The desired effects (you can play around with the width and height):
Edit:
if you don't want the background image to be streched, you can change the css for .bleed-blur to have object-fit: contain so that it maintains aspect ratio but is bigger that the container but also don't cause the container to change in size.
.bleed-blur{
/* required to stack images on top of each other */
position: absolute;
/* blur effect */
filter: blur(10px);
/* the size will be relative to the container */
width: inherit;
height: inherit;
/* you can change this if you need to, but might cuase issues.
Although, `scale-down` seems to work well*/
object-fit: cover;
}
I'm a css newbie and I am using DRUPAL (CMS) to design my site. I have been able to center a image by using this tag:
#block-imageblock-4{
width:25.5%;
height:10%;
text-align:center;
margin-top:1%;
margin-bottom:1%;
margin-left:37%;
margin-right:36.5%;
}
So if the screen resolution is 1366px768px(max #page) or larger #block-imageblock-4 stays in the center of the page.
WELL on another page I have two images with two tags. I used this CSS to place them side by side.
#block-imageblock-17,#block-rotating-banner-1{
display:block;
width:auto;
margin-left:2%;
}
There respective tags:
#block-imageblock-17{
width:15%;
float:left;
margin-top:1%;
margin-left:3%;
margin-right:1.5%;
margin-bottom:5%;
}
#block-rotating-banner-1 {
margin-right:-30%;
margin-top:1%;
margin-bottom:10%;
float:left;
background-repeat:no-repeat;
width:26%;
height:180px;
max-width:100%;
min-height:100%;
background-image:url("/sites/default/files/imgs/ArtistFrame.png");
}
However if the screen resolution is larger than 1366px by 768px then the images are not centered. and thats my problem.
I have noticed that if I take out all float and margins out of both tags and put both elements like this:
#block-imageblock-17,#block-rotating-banner-1 {
display:block;
width:auto;
text-align:center;
margin-top:1%;
margin-bottom:1%;
margin-left:37%;
margin-right:36.5%;
}
the two images ARE CENTERED, BUT NOT next to each other.
Any suggestions to get both images side by side and in the center of the page like tag #block-imageblock-4 ?
Try wrapping the images in a <div> tag and centering the div using margin: 0 auto; .
Something like this
CSS
.centerDiv { margin: 0 auto;}
HTML
<div class="centerDiv">
<img src="urlhere" />
...
</div>
try this:
img {
height: 250px;
left: 50%;
margin-top: -125px;
margin-left: -125px;
position: absolute;
top: 50%;
width: 250px;
}
and more here:
http://www.paulund.co.uk/absolute-center-images-with-css
div
{
margin: 0 auto;
width: 100px;
}
img
{
width: 100px;
}
the width of an element with "margin: 0 auto;" needs to have its width EXPLICITLY defined. See JSFiddle
I want 3 columns
here is the code I have
div id="boundaries">
<div id="fenceleft"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fencescew.png" alt="fencescew" width="52" height="92" /></div>
<div id="fence"></div>
<div id="fenceright"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fencescew.png" alt="fencescew" width="52" height="92" /></div>
</div>
and the CSS
#boundaries {
overflow: hidden;
position:absolute;
top:240px;
display:block;
width:100%;
max-width: 1395px;
height:92px;
z-index: 15;
}
#fenceleft {
float:left;
display: block;
width:52px;
max-width: 52px;
height:92px;
}
#fenceleft IMG {
-moz-transform: scaleX(-1); /* For Mozilla Firefox */
-o-transform: scaleX(-1); /* For Opera */
-webkit-transform: scaleX(-1); /* For Safari, Google chrome */
/* For IE */
filter: FlipH;
-ms-filter: "FlipH";
}
#fence {
float: left;
background: url(img/fence.png) repeat-x;
display: block;
height:82px;
}
#fenceright {
float:right;
display: block;
width:52px;
max-width: 52px;
height:92px;
}
Inside the boundaries div I want fence left and fence right to contain a fixed width image which they do. I want the #fence div to fill the remaining space between the two divs the right image needs to be fixed to the right hand side of the page and the left, the left hand side. the remainder I would like to have a div.
NOTE this question is common but my problem unique. the problem is that the middle or '#fence' div has no content and just a background image. with this selected code nothing displays because it has no content to fill the width.
to sum up i want [52px div fixed left] [remaining width div] [52px div fixed right]
As I understand you need something like this:
html:
<div class="leftFence"></div>
<div class="center"></div>
<div class="rightFence"></div>
css:
.leftFence,
.rightFence {
position: fixed;
height: 100%;
width: 52px;
background: red;
top: 0;
}
.leftFence {
left: 0;
}
.rightFence {
right: 0;
}
.center {
margin: 0 52px;
height: 100px;
background: gray;
}
Demo
#fixwidth1{
width:52px;
}
#fixwidth2{
width:52px;
}
#dynamicwidth{
width:calc(100%-104px); //i.e 100% width of browser - sum of two fixed width
background:#114455;
}
change css for boundaries div to this:
#boundaries {
overflow: hidden;
position:absolute;
top:240px;
display:block;
left:0;
right:0;
height:92px;
z-index: 15;
}
this will properly scale your entire content width to the screen resolution, nvr ever give width like width:1395px. since you made your boundaries container to be absolute, you can stretch it using its top,left,right bottom value (and also width and height);
now change your fenceleft css to this:
#fenceleft {
position: relative;
float:left;
left:0;
width:10%;
height:100%;
}
so now, for any resolution, your leftfence will always be at 0 left from the left border of its parent i.e. boundaries div. and give it a height in percentage, so that, whenever you need to adjust height, you just have to adjust the parents class, just one class.
change your fenceright css to this:
#fence {
position: relative;
height:100%;
width:80%;
float: left;
}
now notice: since you have placed float:left on the fenceleft div, fence will align next to itself i.e. 10% (width of fenceleft) away from the left border of boundaries(parent) div.
also, since it has been given a width of 80%, that means, 80%+10%(from left)=90% hence 100-90 = 10% i.e. 10% width is remaining to the right of fence div. in which you can place your fenceright
change your fenceright to this:
#fenceright {
position: relative;
left:90%;
width:10%;
height:100%;
border:Solid 1px #666666;
}
now all your divs are properly aligned, with no horizontal scroll, covering entire horizontal width of screen.
do not copy and paste these directly. organize your CSS accordingly, do the math. think about a range of resolutions and not just your screen.
read this. it shd help you out.
in the html the center div must be after the left and the right div.
<div id="boundaries">
<div id="fenceleft"><img src="" width="52" height="92" /></div>
<div id="fenceright"><img src="" width="52" height="92" /></div>
<div id="fence"></div>
</div>
in CSS margin: 0 auto let the center div fill the remainder， and width of the center div must be given.
#fence {
margin:0 auto;
background: url() repeat-x;
display: block;
height:92px;
width: 700px;
position:relative;
}
#fenceright {
position:relative;
float:right;
display: block;
width:52px;
max-width: 52px;
height:92px;
}
hi, one example, see here. i hope this can help you.
I want to change the way i am displaying the background image in my pages to gain more flexibility.
Here my CSS Code at the moment in the section id="home" where the image is displayed:
background-image: url("/img/architecture.jpg");
background-attachment: fixed;
background-position: center 1115px;
height: 350px;
width: 100%;
margin-top: 35px;
box-shadow: 2px 1px 6px 0 #888888 inset;
I want to do the same thing but in this way: Create a div in position fixed with this Background-image in the same position and then put above the web page content in an other div (in position absolute?). IS that possible? How can you achieve that? Hope the explanation is clear
Here my page: http://tommywebdesigner.com/Home%20Page.html
And also : http://fiddle.jshell.net/CGJmE/
I think something like:
<div id="background">...background stuff here...</div>
<div id="content">...content here...</div>
with CSS:
#background
{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index: 1;
...other styles...
}
#content
{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:2;
overflow:scroll;
...other styles...
}
would be the place to start.
I want to change the image from normal to brighter when it's on hover, My code:
<div class="nkhome">
<img src="Images/btnhome.png" />
</div>
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
width:59px;
height:59px;
}
.nkhome a img:hover {
background:url(Images/btnhomeh.png);
position:absolute;
top:0px;
}
Why doesn't work the hover? When my mouse is on it, it shows the first image, not the hover image.
You've got an a tag containing an img tag. That's your normal state.
You then add a background-image as your hover state, and it's appearing in the background of your a tag - behind the img tag.
You should probably create a CSS sprite and use background positions, but this should get you started:
<div>
</div>
div a {
width: 59px;
height: 59px;
display: block;
background-image: url('images/btnhome.png');
}
div a:hover {
background-image: url('images/btnhomeh.png);
}
This A List Apart Article from 2004 is still relevant, and will give you some background about sprites, and why it's a good idea to use them instead of two different images. It's a lot better written than anything I could explain to you.
Simply this, no extra div or JavaScript needed, just pure CSS (jsfiddle demo):
HTML
<a href="javascript:alert('Hello!')" class="changesImgOnHover">
<img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>
CSS
.changesImgOnHover {
display: inline-block; /* or just block */
width: 50px;
background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
visibility: hidden;
}
You're setting the background of the image to another image. Which is fine, but the foreground (SRC attribute of the IMG) still overlays everything else.
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
}
.nkhome a {
background:url(Images/btnhome.png);
display:block; /* Necessary, since A is not a block element */
width:59px;
height:59px;
}
.nkhome a:hover {
background:url(Images/btnhomeh.png);
}
<div class="nkhome">
</div>
It will not work like this, put both images as background images:
.bg-img {
background:url(images/yourImg.jpg) no-repeat 0 0;
}
.bg-img:hover {
background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
Hi you should give parent position relative and child absolute and give to height or width to absolute class as like this
Css
.nkhome{
margin-left:260px;
width:59px;
height:59px;
margin-top:170px;
position:relative;
z-index:0;
}
.nkhome a:hover img{
opacity:0.0;
}
.nkhome a:hover{
background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
width:100px;
height:100px;
position:absolute;
top:0;
z-index:1;
}
HTML
<div class="nkhome">
<img src="http://dummyimage.com/100/000/fff.jpg" />
</div>
Live demo http://jsfiddle.net/t5FEX/7/
or this
<div class="nkhome">
<a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'"
onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
/></a>
</div>
Live demo http://jsfiddle.net/t5FEX/9/
Here are some easy to folow steps and a great on hover tutorial its the examples that you can "play" with and test live.
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
Exact solution to your problem
You can change the image on hover by using content:url("YOUR-IMAGE-PATH");
For image hover use below line in your css:
img:hover
and to change the image on hover using the below config inside img:hover:
img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
Make on class with this. And make 2 different images with the self width and height. Works in ie9.
See this link.
http://kyleschaeffer.com/development/pure-css-image-hover/
Also you can 2 differents images make and place in the self class name with in the hover the another images.
See example.
.myButtonLink {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home1.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -5px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.myButtonLink:hover {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home2.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -20x;
border-radius: 3px;
-webkit-border-radius: 3px;
}