I facing some issues for the table alignment over an image which I can't figure out which part is no correct. My table alignment is totally out of expectation when view by using different resolution device(laptop,TV) below is my code.
#image_overlay_panel {
width:100% !important;
float: left;
}
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/iameg/Acer_schematics.png');
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 808px;
background-size: 100%;
}
#effTablehtml{
position:absolute;
top: 28%;
left: 80%;
color: black;
}
I had try to removed height: 808px; and my whole image become very small as attachment below. Mind to share what mistake did I make. Thank you very much.
If you want your image to responsive to all screen, try to fix this rules in your code
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/iameg/Acer_schematics.png');
position: relative;
top: 0px;
left: 0px;
//width: 100%; <-- comment this line
//height: 808px; <-- comment this line
display: block;
max-width: 100%;
height: auto;
background-size: 100%;
}
you can use media screen css , as per your requirement
#media screen and (min-width: 480px) {
body {
}
}
Related
My website is https://www.pisqueya.com
I have a big background image full width always visible at the bottom of all pages, it's working fine on desktop but not on mobile device.
Anyone know what I'm missing with my code below to fix that please?
body {
font-family: portuguesa;
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed;
background-size: contain;
height: 100%;
overflow: hidden;
background-color: #fdeae1;
}
#wrapper,
#main {
background-color: initial!Important;
}
It looks fine for me.
The thing is when you are in a smaller screen the picture is getting small too.
If you want to use the same picture you should change the value of background-size for mobile devices or use a different picture for them.
Hope it can be usefull too.
https://www.w3schools.com/cssref/css3_pr_background-size.asp
Best regards.
You can use CSS media queries for mobile device. Add media query CSS for mobile device size and put your CSS Code in it. Following code will help you.
<style>
#media only screen and (max-width:768px) and (min-width:200px)
{
body {
font-family: portuguesa;
height: 100%;
overflow: hidden;
position: relative;
}
body::after {
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed #fdeae1;
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background-size: contain;
z-index: -1;
}
}
Change Your CSS
body {
font-family: portuguesa;
height: 100%;
overflow: hidden;
position: relative;
}
/*Add This CSS*/
body::after {
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed #fdeae1;
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background-size: contain;
z-index: -1;
}
I was practising in css paralax and got a problem: between background image and a next div there is a white gap, you can just change the width of a viewport and scroll down to see it.
So, my question is: Why it's happening and what I should do to remove it?
A screenshot and Link on JSFiddle or
css code:
.car {
position: relative;
width: 100%;
height: 600px;
background: url(http://i63.tinypic.com/14viwxk.png) no-repeat;
background-position: top left;
background-size: contain;
padding-top: 100px;
padding-bottom: 0;
overflow: hidden;
background-attachment: fixed;
}
.car h1 {
line-height: 1.2;
}
.car figure {
width: 40%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10%;
color: white;
}
figure p {
margin-bottom: 20px;
}
Your image is simply too small. Change background-size to cover and see what you get
What have say #Hunter it's correct, or you can change the height: 600px; to height: 300px; or use other pictures with height: 600px
I'm trying to make my site responsive and I cannot get my pages background image that covers 85% of the screen to display the entire image. It just shows a very small portion of it. What am I doing wrong? If it helps, my site is sundayfundayleague.com .
I'm attempting to do this..
.indexgraypage {
width: 100%;
left: 0;
right: 0;
min-height: 100%;
}
.homeimg {
background-image: url("/images/bright_lights_smallest.jpg");
width: 80%;
background-size: cover;
background-position: center;
height: 100%;
margin: auto;
position: absolute;
margin-right: 10%;
margin-left: 10%;
}
I'm trying to move into responsive web design and I'm having a bit of an issue with my CSS images moving up and down when the browser width changes. Right now I'm working on the nav bar and I'd simply like my menu buttons to stay at the same height within the nav bar as the browser resizes in width, until it at least hits the next #media query and pulls different CSS attributes.
CSS Code:
html, body
{
margin: 0 0 0 0;
padding: 0;
width: 100%;
height: 100%;
}
img{
max-width: 100%
}
ul {list-style-type: none; }
li {display: inline;}
#wrapper {
padding: 0;
width: 100%;
height: 100%;
/* Large Resolutions Desktops */
#media only screen and (min-width: 1600px) {
/* Main Navigation Styling */
#main_nav{
height: 200px;
width: 100%;
background: #1D5799;
}
li.hom a {
margin-top: .5%;
display: inline-block;
width: 349px;
height: 188px;
background-image: url('images/menu-desktop/logo-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
li.ab a{
margin-left: 2%;
margin-top: 8%;
display: inline-block;
left: 20%;
width: 157px;
height: 38px;
background-image: url('images/menu-desktop/about-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
li.iss a{
margin-left: 2%;
margin-top: 8%;
display: inline-block;
left: 30%;
width: 152px;
height: 38px;
background-image: url('images/menu-desktop/iss-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
li.new a{
margin-left: 2%;
margin-top: 8%;
display: inline-block;
left: 40%;
width: 133px;
height: 38px;
background-image: url('images/menu-desktop/news-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
.menu-main-menu-nav-container{
display: block;
height: 100%;
width: 100%;
}
#mobile_logo{
display:none;
}
/* Body Styling */
#main_content{overflow:auto;}
/*Foot Styling */
#f_container {
position: relative;
bottom:0;
width: 100%;
height: 200px;
background: #1D5799;
z-index: 1;
}
}
Then here are a few images showing what I mean:
Full size, positioned correctly:
http://puu.sh/fX3BV/0551e774ce.jpg
Browser width decreased, the menu buttons start moving upwards:
http://puu.sh/fX3It/006ff219a5.jpg
The menu buttons will continue to move upwards until it hits the next media query and "resets" to that browser's resolution. I'd post a live link but it's still only a local build right now. If you'd prefer a OBS video to show the effect I can do that.
Thanks
Go position: absolute and top: 40px(approximately), then use the left & right properties to set the px amounts for the rest of your nav buttons.
The items are moving up due the % margin-top value you have put. try using px instead from margin-top. From my experience you only really need to use % values for horizontal positioning
I have created a div with a class called "responsive_image" and inside that div i have a img tag. The code is,
<div class="responsive_image">
<img src="img1.png"/>
</div>
The css code is,
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 100%;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 6%;
left: 16%;
max-width: 100%;
height: auto;
display: block;
}
Actually, the laptop.png image is the original laptop image with size of 310x186 and inside that, a image with the size of 240x160 and that should correctly fixed inside the laptop image.
From the above code, everything seems to be work perfectly but while going for responsive, each and every time i need to adjust the top and left section in the .responsive_image img. Is there any solution so that i no need to alter top and left?
You have to remove width:100% from the .responsive_image class. And give width:310px as per your laptop image size
Also you have used percentage with top and left position. Change it with pixel. As percentage have always dynamic behavior as per the screen size. USE percentage only when you built a main structure of the html.
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 310px;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 20px;
left: 20px;
max-width: 100%;
height: auto;
display: block;
}