Crop top and bottom of large circle - html

I'm trying to figure out how to make my homepage similar to my business card, seen here without the text: http://katiehambor.com/images/businesscardexample.png
I want the webpage to have this cropped circle to mimic my business card, and at almost any browser size the background image (diagonal stripes) will still be seen on the left and right.
Basically the top and bottom of the circle should be cropped and the left and right should be exposed so that the background image is shown (not shown on this codepen). I want it to be responsive so if someone makes their browser smaller, the circle will still be centered. I also do not want to be able to see the bottom of the circle, since right now if you scroll down you can see the bottom edge.
There will not be a lot of text in the circle, so there's no need to worry that all the text will fit inside.
I also want this site to be responsive so that for horizontal screens it will look like this, but on vertical screens the whole circle will probably be shown. I don't need to figure this out though because I know how to see the full circle, as my problem is with cropping the circle, but it's just something to keep in mind.
Also there will be a text div within the circle—right now it just says 'text' and I made it transparent for reference. I know this might need more divs to accomplish, but I don't really know where to go from here.
Please let me know if there's anything I can clear up about my question—sorry if it seems confusing!
Edit: Below is my first try, but it has been changed so it can now be seen here.
/*original on: http://codepen.io/mezzotessitura/pen/kfenK */
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Katie Hambor</title>
<style>
body {
text-align: center;
background-image:url(images/background.jpg);
background-size: auto;
color: black;
}
.box {
background-color:#00a886;
padding:5px;
top:-10%;bottom:0;left:15%;right:15%;
width:55em;
height:55em;
position:absolute;
border-radius:50%;
}
.textbox {
height:auto;
margin:5em;
position:absolute;
top:0;bottom:0;left:0;right:0;
background-color:#fff;
opacity:.25;
}
</style>
</head>
<body>
<div class="box">
<div class="textbox">
<p>text</p>
</div>
</div>
</body>
</html>

try background-size:cover on the body. but I would make it cross browser friendly.
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;

This should work better for you. http://codepen.io/anon/pen/utkbF
Using css to create the circle:
.box{
border-radius: 50%;
background-color:#00a886;
margin: auto;
}

I received an answer on Reddit here.
Uses vw to accomplish the responsive aspect. And transform for centering it (from this css-tricks article). I used position: absolute instead of fixed, but both do the same job in this case because div.box is positioned relative to the body.

Related

Getting floated image to align top left

I have banner that needs to have an image aligned to the left and full height from top to bottom. To the right of the Image is an H1 with a Tab-selection Div, and below that is Text/Content Div. The Image is set to the height and width I want through WordPress.
Here's an image of what i'm going for:
I can somewhat get what I want by floating left on the image to get the Div Text to go to the right.
But my biggest problem is that I can't get my image to align top left of the banner properly. I had to use -142px margin left and -281px margin-top just to get it to look like it was, but on bigger screens I want that image to always stay left and consistent. It doesn't stay left on bigger screen sizes.
Here's what it looks like:
Here's the code for the Image Div:
(image dimensions set on WordPress as 641 width x 716 height)
margin-left: -142px;
margin-top: -281px;
float:left;
max-width:103%;
left:0;
display:inline-block;
top:0;
position:relative;
The damn image just stays at the bottom. I made sure that the H1 element wasn't displayed as Block in case it was blocking the Image from moving up.
There is a wrapper around the Div Image and Div Text that I used this code:
display: inline-block;
position:relative;
width: 100%;
When I look through Chrome inspector, the width of the Image and Text wrapper doesn't go across the Banner section all the way either. Is this wrapper just my problem? Or is it how I'm targeting the image?
Also just to clarify: I'm trying to code this banner on WordPress so there is pretty limited HTML changes that I can make.
Thanks!! I've been looking everywhere on SO and Google and can't seem to find what I'm looking for. Maybe my problem is too specific? I'd really appreciate the help. I'd also be happy to give more examples / post more code if it helps.
give css to <img>
img{
height:100%;
max-height:100%;
width:auto;
}
may be this should work or if not then just post your html css i can help more from that
Here is a short example of what I did that may help you out some. There's no need to use the float property for this. Just specify the width property to whatever size you want it to be based on screen size.
* {
margin: 0;
}
header {
background: url(https://placeimg.com/1000/500/any);
width: 100%;
height: 500px;
background-size: cover;
}
header .header_img_left {
background: url(https://placeimg.com/640/480/any);
width: 35%;
height: 100%;
background-size: cover;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<div class="header_img_left">
</div>
</header>
</body>
</html>

Header (background) image not resizing when container margins are all relative

My team and I are making a website for an archery competition. We want to use our logo as a header, but the image has been causing us troubles: the image won't resize to fit our needs and keeps duplicating inside the container. Now, we are not wizards, but we have been searching for an answer. We have found many solutions on this website regarding resizing header images, but none of them were applicable to our problem, due to our container sizes being all-relative and the solutions we found were all aboslute. What I mean is that our container sizes in CSS are all relative, but in the solutions, they weren't.
This is my CSS work on it.
#header {
background-image:url('../files/ifaa_dutch_open_logo.jpg');
height: 40%;
width: 96%;
top: 2%;
left: 2%;
border-radius:15px;
float:center;
position:relative;
}
This is the corresponding HTML-code:
<div id="header"></div>
To further illustrate what is happening, here's a picture:
The picture
What is wrong here? We want the image to resize to fit the container, but it won't. The ratio doesn't seem to matter, for I have also tried it on a new page, where the image was exactly 1/4 of the container, it would just show four pictures, in each corner.
What are we doing wrong and how can we fix this?
I way I see it, your main problem is that the image is repeating itself, and as a result, it unable to fit the container properly. Try:
background-size: cover;
background-repeat: no-repeat;

Fixed Div the length of the window

I am very new to HTML/CSS. I am building a website for the Sheriff's office I work for, and am having an issue.
The website has a fixed div on the left side of the page, that includes all of the links. The content is on the right, and is designed to scroll, however I want the left div (links) to always remain the same. I designed the site on a laptop, and so far its working fine on that, however when viewing the homepage on a desktop, the left div doesnt stretch all the way to the bottom.
Here is the link: http://www.mlpropmgt.com/sheriff3/index.html
I used percentages, thinking that would make that left div always stretch to the bottom of the screen, however it didnt seem to work.
Any help would be much appreciated!
from what I gather viewing the code in your webpage you did all the right things, and the leftbar is 100% height, however the image you used as a background is not, css does not stretch the image unless you tell it to do it, you can use
.leftbar{ background-size: cover;}
or use an image that is big enough to account for the extra height in a desktop, keep in mind that Imac's hace 1440px window height
Since you have 2 divs do this
<div id="Main_div">
<div id="left_div">div 1</div>
<div id="Right_div">div 2</div>
</div>
css
#Main_div
{
border:1px solid red;
height:100%;
width:100%;
position:fixed;
}
#left_div
{
border:1px solid black;
height:100%;
width:40%;
float:left;
position:fixed;
}
#Right_div
{
border:1px solid blue;
height:100%;
marigh-left:41%;
float:right; // or its not needed
}
let us know
give height of the div as 100% (height:100%;) then set position:fixed;
it will works fine
Hi righ now your left side it has 100% height so is working the div is streching all the way to the bottom. The problem is the background image. The background image is smaller than a desktop window height so that's why it looks like is not streching all the way to the bottom.
Possible solutions:
Change the background image to a bigger one that just have the "background", and put another two images with the sherif star and the sheriff's logo/name with a absolute position so they will look like background images.
You can add the following to your leftbar div. The problem here is that the image is going to strech and at some point you are not going to be able to see the complete logo/name
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Background image won't display in div but will in body tag

I went to my friend's house to see how my webpage displays on other resolutions, but found that the background image didn't reach the sides. So, I went home and did some research and was told that instead of having my background image in the body tag, I should create a div inside of the body tag before the container div and it would work.
This did work for one of my designs but not in the other - the code was exactly the same, but the images weren't.
I tried adding position:absolute in my CSS and it does show, but it has a strange white border along the top and left hand side.
How can I resolve this issue?
HTML:
<html>
<head></head>
<body>
<div class="background">
</div>
<div class="container">
</div>
</body>
</html>
CSS:
body{
text-align:center;
}
.background{
background:url('images/background.png')no-repeat;
width:100%;
height:100%;
background-position:center;
}
Not quite enough information to really give you a good answer... but the white line on the top and left of the page sound like the natural margin appended to the body tag. If you add this to your css it should remove that:
body {
margin: 0px;
}
Also, the background image "reaching the sides" will be primarily dependent on the image's dimensions relative to the viewing screen resolution and browser size. These factors are out of your control so be cautious where you're using an image in the background of your designs.

Clip images with HTML and CSS

I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js