Hi i have created this html code for add photos on my site , the photo with my computer is seen in the correct posizone, but when when I see my picture on the computer of my friend I find the picture in a different location, how can I fix this problem ?
<img src="https://s27.postimg.org/8gj6vh1ur/a1_android.png" style="position: absolute; z-index: -10; width: auto; height: 50%; top: 785px; right: 0px; bottom: 0px; left: 24px" />
`
Although your snipet is too incomplete to provide any sort of answer I will point out that "width: auto; height: 50%;" make your picture's dimensions variable based on the monitor's resolution and operating system (retina display, scaling etc).
Related
What i have
If I have two images (one includes frame and another includes the picture),
My question
can I show it in the same image by using Polymer? I think it looks like bitmap in android and I want to do in web but I really don't know how
Here is one example on how to place a picture over a picture. Since I didn't have any pictures i "faked" them with span tags. Plunkr
<style>
.pic-one{
background: red;
position: absolute;
height: 30px;
width: 30px;
}
.pic-two{
background: blue;
position: absolute;
margin: 5px 5px;
height: 20px;
width: 20px;
}
</style>
<div class='container'>
<span class='pic-one'></span>
<span class='pic-two'></span>
</div>
Okay. I have an issue with an image within a div. Fixed image within a div to make parallax scroll.
Here is what I want to do.
I have a div. Here is code.
#container{
height: 500px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
overflow: hidden;
}
Now I want to add an image in there that is fixed.
#container-img{
position: absolute;
background-position:top center;
margin-right:0px;
bottom:0;
height: 500px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
display-inline: block;
}
My problem is I want image fixed within the div and it goes all over the place. I do not want to add image via css as I have it in Wordpress for someone to change image when they want via dashboard. Here is HTML
<div id="container" >
<img id="container-img" src="<?php echo get_template_directory_uri(); ?>/images/home.jpg"/>
</div>
I want the css to make image fixed and not go outside the div? Any solutions? Thanks.
display-inline: block; is not a valid CSS. Try using display: block. Also background-position:top center; is not needed as you don't have any background image specified.
I would suggest you still use a background image with a background-size: cover; or you will have a hard time distorting the image proportions.
You will need to put the image in a inline style on your container:
<div id="container" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/home.jpg')">
Hope that helps.
My product image gallery uses a fancy box script and since i installed a plugin, i am having a small problem with the images popping up, then immediately jumping to the upper left corner.
i have tried adding stying to recenter it but its not working.
here is a product page:
http://a1decals.com/products-page/tribal-symbols-decals/flags-decals/america-american-flag-decal-sticker/
if you click on an image in the gallery you can see it popup.
i inspect the image element with firebug and get:
<div id="fancybox-wrap" style="width: 695px; height: auto; top: 0px; left: 0px; display: block; opacity: 1; transition: all 0s ease; -webkit-transition: all 0s ease;">
and i tried adding:
.fancybox-wrap {
top: 50% !important;
left: 50% !important;
}
and
#fancybox-wrap {
position: absolute;
top: 50% !important;
left: 50% !important;
}
i cant seem to override whatever is restyling that popup. any help is greatly appreciated
I'm trying to center my content div. It's set to 100%, and the div is contained in body, which is also set to 100%. I have a max-width: 1400px because I don't want my content to stretch more than that if the screen resolution is higher. The thing is, it doesn't work using margin: auto. My content stands on the left, uncentered on screen wider than 1400px.
If I delete the max-width, everything is perfectly centered on wide screens, but the content is stretched to the the whole screen...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Easiest way to achieve this, is to set the width property to the max width you need, and add max-width: 100%;. This will prevent it from being bigger than 100% but still go up to the max width. Also, you should remove the absolute positioning:
JS Fiddle
You can use the transform technique, which doesn't require extra mark-up or media queries.
#content {
position: relative; /* 'fixed' will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Here's a demo https://jsfiddle.net/matharden/6uduf7av/
Use Flexbox...
Put this classes in the parent element (the body):
The HTML
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Where:
p-flexbox means parent-flexbox
flex-hcc means flexbox-horizontal-center-center
The CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Cheers,
Leonardo
I have a common css for all the pages in my application called growl.css...
I have
.ui-growl{
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
How do I change the background color of the growl message. Inserting color and background-color didn't change a thing. Thanks
.ui-growl-item-container { background-image: url('./imgs/background.jpg'); }
this is to set image , try using color or background-color