Currently I have an image/img tag that is 1920 x 1080 posted on my Site (the first image displayed of the city).
I now want to style a <p> a <button> and a click-able phone number on the the image so I figured that I have to turn it into a <div> and use the image as a background.
When I tried background:url(image/Houston_remodeling.jpg) center no-repeat; on the div in order to achieve the way that the image is displayed/scaled as you adjust the browser size (on current website, gulfstate.us), the image is displayed zoomed in to the top corner and doesn't look pretty.
If any one can please help I would be very grateful. I am new to this so let me know what else I need to supply and I'll comment right back.
Thank you so much for your help!
Try background-size: cover;
From spec.
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
done some modifications
Following will work fine,
Replace the your img tag with this.but its a hack , better to use css background-size
<div style="position:realtive;left:0;top:0">
<div style="position: relative;top:0;z-index: 1;">
<img class="headimg" src="image/Houston_remodeling.jpg">
</div>
<div style="position:absolute;top: 100px;left: 50%;z-index: 2;">
9999999999999999999999999
</div>
</div>
As we are kinda guessing here I will just have a couple random guesses.
This way is using background-size: cover;, as I was writing this I see someone has already suggested it but as I have a example I may as well continue.
HTML:
<div id="header">
<p>This is test text</p>
<p><a>Phone Number: 0000-00000</a></p>
<button>Test button</button>
</div>
CSS:
html,body {
width: 100%;
}
#header {
width: 100%;
max-height: 600px;
min-height: 400px;
position: relative;
z-index: 9998;
background: url(http://www.3dwallz.com/wp-content/uploads/2013/08/21/ice-city-lake-wallpapers-x.jpg) center no-repeat;
background-size: cover;
}
Take a look and see if that's how you want it to react to resizing, give feedback if its not and we will have another go.
DEMO HERE
Note: After looking at the website you have linked to, I would suggest using this method for your div background. It is a lot cleaner and looks overall more professional.
quick demo you need to tweak the css as per your design ,
www.jsfiddle.net/jKnbL
Related
if you could take a look for a moment at http://www.acehbus.com, you could see that the screenshot image of iPhone is fully seen in the screen. I want to know how to make the half of the image overlays the next div like in the http://sociali.st. I have tried z-index but it doesn't work. Thanks you for your help.
I got through your site, and I have two things:
1) dont use images with resolution of 649x1323. Half of that size will ok .. there are many of images of this phone, and people with slower connection will die on this. And it is still used only as smaller thumbs, so large resolutions are really not necessary.
2) You use the image as itself. Use div instead and give image as its background. See this fiddle:
https://jsfiddle.net/8xhucpx8/
div.image{
width:300px;
height:200px;
background-image:url('http://www.acehbus.com/img/search.png');
background-position:top center;
background-size:100% auto;
background-repeat:no-repeat;}
You can do that using overflow: hidden first give a fixed height to the parent element of the image in your case col-md-6. So do something like.
.col-md-6 {
height: 155px;
overflow: hidden;
}
<div class="col-md-6">
<img src="http://www.acehbus.com/img/search.png" alt="" width="200px" />
</div>
First of all, you may always inspect a site with effect you want to achieve and try to apply it's approach in your project. The markup and styles are at direct access. If you noticed in the example you've provided the overlapping effect is achieved with combination of negative margins and absolute positioning. So if you play with these properties you gonna make it. I would go for something like this:
<div class="iphone"></div>
.iphone {
bottom: -100px;
position: relative;
}
Look, I made some experiments and made this fiddle
I want to create a website by HTML codes.
I have a few questions and I have simplify the codes so that you can easily understand my problems.
my first div :
<div id="div1" style="display: none;">
<div class="h1">INFORMATION</div></div>
my second div :
<div id="div2" style="display: none;">
<div class="h1">INTERNATIONAL STUDENTS</div></div>
CSS :
body {
background-image: url(world-map_00246938.jpg);
background-attachment: fixed;
line-height: 15px;
text-align: justify;
background-repeat: no-repeat;
background-size: cover;
background-color: #FFFFFF;
background-properties: fixed;
}
div1 is the first appearance of website. I got a problem when I click a link to appear the div2, the background of website transform to the bigger size. But it's turn to normal size when I click a link to div 1.
The background image of website is turn to bigger size at div2 when I'd inserted an image in div2 :
<div id="div2" style="display: none;">
<div class="h1">INTERNATIONAL STUDENTS</div>
<center><img src="url.png"
width=100%></center></div>
From my view, I think that the insertion of an image in div2 makes the background image of website transform to bigger size. But when I looking at my codes, I already put the background properties as a fixed.
Now, I want to find a solution that can maintain the size of my background image of website no matter what things that I inserted to that codings..
Any helps much appreciated.
The problem is the background-size: cover declaration, which will change the background size to cover the entire element. Removing that should cause the background image size to be the original image size.
I have a problem I'd like some help with. Thankfully my code can be flexible, so I'll just give some generic markup.
My major limitation (due to the way I am retrieving the information from a database) is that the images CANNOT be background images, otherwise this would be easy.
I simply want an image to change when I hover over it. I have made an image twice as high as I need it - half colour, half black and white. The idea is, the image is exactly the same (a person) - but when you hover over it - you see the colour version.
I have constructed my 'hover' image 200 pixels wide, and 400 pixels high. It is marked up very simply:
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='.....' alt='....' />
</div>
</div>
So I am figuring I need something like:
.staff_image {
float: left;
height: 200px;
width: 200px;
}
The trouble is - using this, the 400px high image displays by default in the centre of that staff_image div - so I see half the black and white photo, and half the colour.
I am going to be using jQuery to do the hover - so just need some CSS tips on what properties I need to use to:
Have the image display at the very top
Have the image display from halfway down
Everything I try with padding and margin seems to push all content down, and doesn't move the actual picture inside at all. I basically need to know how to maneuver an image that is too tall for a fixed height div around WITHIN that div. And none of the answers I can find here seem to help. There are lots of them on centering an image - but centering is NOT what I want to do - it's the opposite! :)
Thanks for any help.
Here you go: http://jsfiddle.net/xqxSK/
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />
</div>
</div>
.staff_image {
overflow: hidden;
height: 200px;
}
.staff_image img {
position: relative;
}
.staff_image:hover img {
top: -200px;
}
I'm using CSS instead of jquery for the hover. This is a better approach, since it works better on touchscreen devices.
I want to introduce/insert a html code and a widget into a picture, something like a paypal button and a time coundown . In witch way it is possible to do that ?.
I appreciate every answer. Please give me some tips.
Give some other clues mate.
From what you rote, I think that you can accomplish that just with a little css.
Let's say, the image on css's z-index 5, and the content that you want to place over it on z-index 6, 7, 10, doesn't mind as long it's greater than the z-index of the image.
Then, the counter, just google a little and you'll find plenty tutorials about javascript countdowns.
As I said. Use z-index css propperty.
Take a div, set it to the image exact size, then with margins and z-index, place the counter on top of it.
As an example:
<div id="image">
<div id="progress"> ... </div>
</div>
Where the css for each would be:
#image{
width: 400px;
height: 500px;
z-index: 0;
}
#progress {
z-index:10;
margin-bottom: 20px;
}
The width and height propperties should be the image's size ones. The rest it's up to where excactly are you gonna place this code.
Just ran into a problem with repeating background image.
In the case when the content is very short, shorter than the monitor height, the background image is still repeating for the extra space.
Please refer to the screenshot.
Orange bar is my footer. The bottom grey area is the extra space.
Can I make stop the background image repeating for the bottom area?
I mean ideally the background image just repeats as long as my content.
Any help will be appreciated.
.
You can use the below property.
background-repeat:no-repeat;
For more information go through this site
You can also give repeat-y or repeat-x to make the background-image repeat vertically or horizontally respectively.
If you want to give dimensions to your background image then you can use
background-size:100px 100px; /* width height */
I think this is what you mean.
Rather than sticking the background onto the body, slap another div in there and put the background onto that. The inner content will push the div to the right height and will stop at that point (unless otherwise stated).
eg:
<!doctype html>
<html>
<body>
<div id="background">
Your inner content
</div>
</body>
</html>
and put your repeating background onto #background in your css rather than your body.
you can set your background directly in CSS making like so:
body {
background: url(../images/background.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Hope this helps :D
It would be good if you could post your code here.
Try something like this:
<div>
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both"></div>
</div>
<div class="footer"></div>
</div>
Try this in the style section.
background-size: cover;
background-repeat:no-repeat;