I have the following code on home page:
<ul id="slides1">
<li>
<!-- About-->
<div class="logo"></div>
<div class="sub1"> </div>
<img src="images/nadpisi/about.png" class="nadpis1">
<img id="i1" src="images/MiddleBg/first.jpg"/>
</li>
</ul>
Here I have logo in class=logo and div class sub1 has background image in css file:
.sub1{
background-image: url(../images/sub1/about.png);
width: 600px;
height: 100px;
position: absolute;
z-index: 7;
top: 270px;
margin-left: 490px;
background-repeat: no-repeat;
}
.logo {
background-image: url(../images/LOGO.png);
width: 229px;
height: 129px;
background-repeat: no-repeat;
position: absolute;
z-index: 10;
top: 80px;
margin-left: 490px;
}
When I open the page with Chrome, both these logo and sub1 background images are not displayed but image after them does display, but when I go to browser`s address bar and press Enter they display. What is the problem, can anyone help?
Your images are probably not being found. Most likly a problem with your paths. Check if the image loads in a developer console.
Related
/How to set width and height of image to be 150px and to be responsive/
/HTML/
<div class="tabs__tab-image-container">
<img src="https://pbs.twimg.com/profile_images/1208234904405757953/mT0cFOVQ_400x400.jpg" class="tabs__tab-content-img">
</div>
/CSS/
.tabs__tab-image-container {
max-width: 150px;
min-height: 150px;
height: 100%;
width: 100%;
}
tabs__tab-content-img {
border-radius: 50%;
max-width: 150px;
height: auto;
display: block;
object-fit: cover;
}
You need to be clearer in your question. You want an image to ALWAYS be 150px square but the DIV to be responsive? Or do you want the IMAGE to be responsive within the DIV? As you're only showing a DIV with a single image in it, it's hard to tell what the goal is.
A responsive page is one that changes based on the viewport size; locking the image down to a fixed size kinda defeats the purpose in that case. Your CSS also isn't using the image class as it's incorrectly formatted.
The following fixes the image class as you've specified it, but all this does is round the image corners; the content won't be responsive:
CSS:
.tabs__tab-image-container {
max-width: 150px;
min-height: 150px;
height: 100%;
width: 100%;
}
.tabs__tab-content img {
border-radius: 50%;
max-width: 150px;
height: auto;
display: block;
object-fit: cover;
}
HTML:
<div class="tabs__tab-image-container">
<div class="tabs__tab-content"><img src="https://pbs.twimg.com/profile_images/1208234904405757953/mT0cFOVQ_400x400.jpg">
</div>
</div>
To make the page responsive, you can add viewports in CSS for different page sizes, or if it's just the image displaying (with a line of text in the div for example) use the following:
CSS:
.tabs__tab-image-container {
text-align:center;
font-family: "Comic Sans MS", cursive;
font-size: 10.0vw;
font-weight:700;
}
.tabs__tab-content img {
border-radius: 50%;
width: 100%;
}
HTML:
<div class="tabs__tab-image-container">
<div class="tabs__tab-content"><img src="https://pbs.twimg.com/profile_images/1208234904405757953/mT0cFOVQ_400x400.jpg">
Text Here
</div>
</div>
If you only need the image, you don't even need the tabs__tab-image-container class, just use the tab content class targeting the image.
I have a slider on a homepage I am currently working on. I am trying to achieve a full viewport height that takes up the whole width for the screen.
The only way I can currently achieve this is by either stretching the image, or the image isn't centred.
The image needs to be aligned roughly centred horizontally and vertically, so customers can see the centre of the image on any width of browser, and without stretching the image out of proportion.
I have tried the background-size: cover; on the element with no success as its not a background img. the containers have 100vh currently, but the width is the issue.
The issue is located here http://joeybox.info/ . I realise with the menu and the logo above the image the 100 viewport height will rest under the "fold", however I am placing the logo and menu over the image eventually, once I have figured out the css.
I have tried many solutions found within the stack overflow forum and none work in my scenario.
My current css, after deleting the in-correct code, is:-
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
.ewic-wid-imgs {height: 100vh;
max-width: unset;
width: unset;}
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
html=
<div class="slider-box">
<div id="ewic-con-385">
<div style="display: none;" id="preloader-385" class="sliderpreloader">
</div>
<div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">
<div style="width: 100%; overflow: hidden; position: relative; height: 633px;" class="bx-viewport">
<ul style="width: 315%; position: relative; left: 0px;" class="bxslider-385">
<li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span></div>
</li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span>
</div></li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg"><div class="ewic-caption">
<span>Qw Direct Leather Keyrings</span>
</div></li></ul></div>
<div class="bx-controls bx-has-controls-direction bx-has-controls-auto">
<div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a>
<a class="bx-next disabled" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div>
<div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div><br>
</div>
</div>
To achieve this you could add to your image inside .bx-wraper:
.bx-wrapper img {
display: inherit;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width: inherit;
}
now you need to set the parent li to relative:
.bx-wrapper ul li {
position:relative;
width:100%;
height:100%;
list-style: none !important;
margin: 0 !important;
}
and change your parent ul:
.bx-wrapper ul{
width:100%;
}
I have solved the above by changing my image slider. My new slider plugin (Envoke Supersized) uses a background image and was easier to use background-size:cover; css. Although after this full viewport height on mobile widths didn't look good with my images so I used 40vh on mobile widths.
I would recommend anyone trying to do the same to ensure your image is a background image, or replace the slider with a static background image for small browser widths.
While scrolling down through a image animation it flickers between each image. When scrolling back up and starting over, the flickering goes away. Works perfectly fine in Chrome and Firefox. Heres the code structure:
HTML
<div class="container" id="arena">
<div id="animate"
data-anchor-target="#arena"
data-smooth-scrolling="off"
>
<img class="lazy" src="img/animations/ctu_hq_animation_mb_4.0001.png" alt="" data-0-top="display:none;" data--100-top="display:block;" data--125-top="display:none;">
<img class="lazy" src="img/animations/ctu_hq_animation_mb_4.0003.png" alt="" data-0-top="display:none;" data--125-top="display:block;" data--150-top="display:none;">
<img class="lazy" src="img/animations/ctu_hq_animation_mb_4.0004.png" alt="" data-0-top="display:none;" data--150-top="display:block;" data--175-top="display:none;">
</div>
CSS:
img {
height: 500px;
width: 800px;
position: fixed;
}
#arena {
position: relative;
width: 1000px;
height: 900px;
background-size: 900px 800px;
}
#animate {
width: 850px;
height: 650px;
position: fixed;
background-size: 900px 800px;
background-repeat: no-repeat;
left: 10%;
}
Fixed, img {position: fixed) was the problem. Remove and solves the problem
I want to arrange the two pictures in a way that will always compose the word "Charleston" in the middle of the screen. I want this to be responsive to different screen resolutions. Can you help me with that?
<div id="leftHalf"></div>
<div id="rightHalf"></div>
#leftHalf {
background: url(/charback3.jpg);
width: 50%;
position: absolute;
top: 0px;
left: 400px;
bottom: 0px;
height: 100%;
background-repeat: no-repeat !important;
}
#rightHalf {
background: url(/charback4.jpg);
width: 50%;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
background-repeat: no-repeat !important;
}
View My Page
Here is one method, using display:inline to keep the two images on the same horizontal line. max-width:50% keeps the images at a maximum of 50% of their container's width without expanding beyond their native widths.
Note that using display:inline will preserve whitespace. So, remove the whitespace between your two <img> tags.
<div id="container">
<img src="/charback3.jpg" alt="" /><img src="/charback4.jpg" alt="" />
</div>
html, body {
margin:0;
}
div#container {
text-align:center;
}
div img {
display:inline;
max-width:50%;
}
WORKING EXAMPLE (jsfiddle)
I am currently designing a site using Bootstrap and am trying to include a full height background cover image like on this site: http://lewisking.net/.
This is my code:
HTML
<header class="title">
<div class="cut">
<img src="" height="">
</div>
<h2>Vintage Boutique Based in New York</h2>
<nav>
<ul>
<li>SHOP</li>
<li>ABOUT</li>
<li>PRESS</li>
</ul>
</nav>
</header>
CSS
header {
background: url(../img/nycfull.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.cut img {
max-width: 100%;
height: auto;
max-height: 100%;
}
However, I can't see to get the image to cover the entire "above the fold" section. The image just go as height as the text in the header. Any idea what I am doing wrong?
Do you mean like this demo ?
If yes try this code :
CSS CODE
.cover{
color: rgb(255, 255, 255);
position: relative;
min-height: 350px;
background: url("http://lewisking.net/images/header-image.jpg") no-repeat scroll 0px 100% / cover transparent;
}
nav ul li {
list-style:none;
float:left;
margin-right:50px;
}
HTML CODE :
<div class="cover">
<div class="clearfix"></div>
<nav>
<ul>
<li>SHOP</li>
<li>ABOUT</li>
<li>PRESS</li>
</ul>
</nav>
</div>
Your nav and header should not be together! Use your header to display your initial section for your site (what people see when they land on your page). Add positions to your nav to fix it where you want instead.
CSS code for a full height cover image:
header {
background-image: url(background-img.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
min-height: /*enter value here*/;
}
In your HTML, you should code your <nav> navbar html here </nav> first, and then your <header> header html here </header>.
If you are coding your site to be mobile-ready, read this tutorial to implement a working cover image fix: CSS background-size: cover – Making it work for mobile / iOS