I'm using JSSOR image gallery and currently it is stretching portrait images.
I have made a css class where it is no longer stretching:
However I can't get the imace centered in the div.
<div>
<div class="portrait" u=image style="background-image: url(../img/zachry/1.jpg"> </div>
<div u="thumb"></div>
</div>
Here is the CSS?
.portrait {
position: relative;
width: 850px;
height: 565px;
background-repeat: no-repeat;
text-align: center;
}
How can I get the image centered?
You are using an image as a background from a div.
Almost any element has an attribute called: background-position which can take center as value to center the image given into the middle from the element.
so it could be something like:
.portrait {
...
background-position: center;
}
Using the following code in your CSS should work:
background-position: center;
I think of two possible ways....
div {background-position: center;}
div {margin-left:auto; margin-right:auto;}
Related
So when I try to define the background-image for the below html:
<div class="generalVideo">
<div id='generalButton'>
</div>
</div>
like so in css:
#generalButton{
background-image:url(files/gss.png);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
}
nothing shows up.
However, if I keep the css the same and add an image to the html like so:
<div class="generalVideo">
<div id='generalButton'> <img src="files/gss.png" alt="">
</div>
</div>
So you can see the two images overlapping on each other in different positions. If I deleted the background-image from the css, the img in the html also disappears. Why is this happening?
In the first instance there are no dimensions for the background-image to take up so nothing shows.
In the second instance the img is an element within the HTML and in the absence of any other styling it shows at its 'natural' dimensions.
Also, by default, the parent div will take on width and height: auto so essentially the img gives it some width and height. So the background-image also has some dimensions to work with and can be set up at 70% as required.
To get just a background image to show you need to tell the system a width and height. This snippet gives it a square in terms of vmin units:
#generalButton {
background-image: url(https://picsum.photos/id/1015/200/300);
background-position: center center;
background-repeat: no-repeat;
background-size: 70%;
background-color: pink;
width: 50vmin;
height: 50vmin;
}
<p> background-image only, no img element: </p>
<div class="generalVideo">
<div id='generalButton'>
</div>
</div>
Note: the div has been given a background color too so it's size is obvious.
They overlap because the background-image is centered and the img-tag is not.
You need to set a width and height on the div if you only want to use the div.
#generalButton {
background-image:url(https://picsum.photos/200);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
height: 200px;
width: 200px;
}
<div class="generalVideo">
<div id='generalButton'>
<img src="https://picsum.photos/150" alt="">
</div>
</div>
I have code something like this:
<div class='image-holder' style='width:128px; height:128px'>
<img class='thumbnail' src='image1.png'>
</div>
The actual size of .thumbnail is unknown, and can potentially be not an exact square.
So what I am trying to do is not change the dimensions of the image (.thumbnail) at all, but instead show just the center (both horizontally and vertically) of the image inside the .image-holder element.
For example, if the image (.thumbnail) was 256x256, the inner 128x128 section of the image should appear inside .image-holder.
I am open to using an actual img element, or, using background-image for the div. I have experimented with both with no success.
I am fairly certain I can write some javascript to do the work if necessary, but I was looking to see if there is a pure CSS solution before I go down that road.
You should use background-image for this. Just remove the default repeating from it, and set the background-position: center;
See it here:
.image-holder {
width:128px;
height:128px;
border: 1px solid red;
margin: 10px;
background-repeat: no-repeat;
background-position: center;
}
#holder-1 {
background-image: url('http://via.placeholder.com/350x150');
}
#holder-2 {
background-image: url('http://via.placeholder.com/100x100');
}
<div id="holder-1" class='image-holder'></div>
<div id="holder-2" class='image-holder'></div>
New at Bootstrap. I'm having a problem setting my background image to follow the header image.
The header section has it's own full-screen background, which I then want to be followed by a tiled background image.
I tried:
<div class="header">...</div>
<div class="main-body">
<div class="container">...</div>
<div class="container">...</div>
...
</div>
<div class="footer">...</div>
with the following stylesheet:
.main-body {
text-align: center;
background: url(../img/setttings-bg-black.jpg) no-repeat center center;
background-size: 1024;
background-color: #000000;
}
.header {
text-align: center;
color: #000000;
background: url(../img/promo-bg.jpg) no-repeat center center;
background-size: cover;
}
The problem is that the main-body background's top is hidden by the bottom part of the header body.
What am I doing wrong?
Verify this link or link
have a solution for you.
problem 1)
What I did is I added a <img> below the first div (so the div with the class intro). The img has a clas of bg.
Than add this css:
.bg{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
here you have a working fiddle. I added a lot of <br> tags to show you it works.
You can also try to set the background image height:100% and width:auto;. If you do this the image won't be so crammed together on some screens.
problem 2)
I Gave every slide a class slide1. I also added to all the slide classes position:relative;. Taka a look at this fiddle.
i hope your question is now anwsered. If you have other problems, feel free to ask.
My header-banner is set to width 100% but its not covering everything on the top it looks like its 70% and text is not setting to center, When i inspect element in chrome it shows 100% width but in actual display it does not. How can i fix this issue ?
main.html
<div class="row">
<div class="col-md-12">
<div class="header-banner">
<h1>Server</h1>
</div>
</div>
</div>
main.css
.header-banner {
background:url('../img/header_master.jpg');
width:100%;
min-height:70px;
background-repeat: no-repeat;
text-align: center;
}
Try It:
.header-banner {
background:url('../img/header_master.jpg');
width:100%;
min-height:70px;
background-repeat: no-repeat;
text-align: center;
background-size: cover;
}
Bootstrap rows have a margin associated with them. So when using bootstrap rows there will always be a margin unless you remove that in CSS.
as an excercise i decided to delve in to css layout styling and am already failing to see why my layout is not aligning correctly. also why is the container div only appearing when there some text in there. i thought it would display and grow based on the background property in css statement. i have done screengrab to show problem. can someone show my error. thanks
screen grab: http://imageshack.us/photo/my-images/21/containergrabnew.png/
css
#container {
width: 800px;
margin: 0 auto;
background-image: url(../images/container-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
#containerLeft {
width: 475px;
float:left;
background-image: url(../images/container-left-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
#containerRight {
width: 300px;
float:right;
background-image: url(../images/container-right-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
html
<div id="container">
This is the container
<div id="containerLeft">
This is the left container
<div id="containerRight">
This is the right container
</div></div>
</div>
am already failing to see why my
layout is not aligning correctly
Your HTML is not nested correctly. Change it to this:
<div id="container">
<div id="containerLeft">
This is the left container
</div>
<div id="containerRight">
This is the right container
</div>
</div>
also why is the container div only
appearing when there some text in
there. i thought it would display and
grow based on the background property
in css statement.
You need to clear your floated elements.
You can do this by adding overflow: hidden to #container.
You should read this article for more information: http://css-tricks.com/all-about-floats/
It discusses why this happens, various ways to fix it, and includes useful and relevant information about floats in general.