Css background image рамка

How to Add a Frame Around an Image

There are cases when building a web page you want to add a frame to the image without using Photoshop or any other editor. CSS can help you with this problem adding colorful frames with your preferred width and style to the image.

You can make a simple frame around an image by using the CSS border, padding and background properties.

Create HTML

html> html> head> title>Title of the document title> head> body> div class="frame"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

Add CSS

• Set the height and width for the frame.
• Specify the style, the width and the color of the border with the border shorthand property.
• Set a background-color.
• Set the margin to «auto» and the padding with two values. The first value sets the top and bottom sides, and the second one sets the right and left sides.
• Set the width and height of the image to 100%.

.frame < width: 300px; height: 250px; border: 3px solid #ccc; background: #eee; margin: auto; padding: 15px 10px; > img < width: 100%; height: 100%; >

Now, you can see the full example.

Example of adding a frame around an image:

html> html> head> title>Title of the document title> style> .frame < width: 300px; height: 250px; border: 3px solid #ccc; background: #eee; margin: auto; padding: 15px 10px; > img < width: 100%; height: 100%; > style> head> body> div class="frame"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

Result:

If you want to make a circle frame border for your image, you need to set the border-radius to 50% for all the sides of your border. Set the border-color, border-style, border-width properties according to your requirements. Do not forget to set the overflow property to «hidden» to make the rest of the image invisible.

Example of adding a circle frame around an image:

html> html> head> title>Title of the document title> style> .circle < border-color: #666 #1c87c9; border-image: none; border-radius: 50% 50% 50% 50%; border-style: solid; border-width: 25px; height: 200px; width: 200px; overflow: hidden; > img < height: 100%; width: 100%; > style> head> body> div class="circle"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

You can have different outputs by changing the border-radius and border-color properties. For example, if you want to have a square frame, you just need to set the border-radius to 0 for all the sides.

Example of adding a square frame around an image:

html> html> head> title>Title of the document title> style> .square < height: 200px; width: 200px; border-color: #666 #1c87c9; border-image: none; border-radius: 0 0 0 0; border-style: solid; border-width: 30px; > img < height: 100%; width: 100%; > style> head> body> div class="square"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

If you want to have rounded corners for specific corners, set the border-radius to 50px for the corners you want to be rounded. In this case, also change the width and height according to your image size.

Example of adding a frame with rounded corners:

html> html> head> title>Title of the document title> style> .rounded-borders < height: 200px; width: 300px; border-color: #666 #8ebf42; border-image: none; border-radius: 50px 0 50px 0; border-style: solid; border-width: 20px; > img < height: 100%; width: 100%; > style> head> body> div class="rounded-borders"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

How to Add a Border Image Frame to an Image

It is also possible to add an image as a border. For that purpose, CSS has a border-image property, which allows specifying an image as a border around an element.

You can define how to repeat the border-image in the following ways:

• stretch — the image is stretched to fill the area (this is a default value),
• repeat — the image is repeated to fill the area,
• round — the image is repeated to fill the area, (if it does not fill the area with a whole number of tiles, the image is rescaled, so it fits),
• space — the image is repeated to fill the area (if it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles).

Example of adding a border-image frame:

html> html> head> title>Title of the document title> style> div < width: 80%; height: 300px; margin-bottom: 20px; background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat; background-size: cover; > img < width: 30%; height: 30%; > .border-one < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 50 round; > .border-two < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 35% round; > .border-three < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 100% round; > .border-four < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 20 stretch; > style> head> body> div class="border-one"> div> div class="border-two"> div> div class="border-three"> div> div class="border-four"> div> hr> p>Here is the original image: p> img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border"> body> html>

Источник

Больше контроля над границами CSS с помощью background-image

От автора: у вас не так много контроля над тем, насколько большими или длинными будут штрихи или пробелы у границ border. И вы, конечно же, не можете придать штрихам наклон, затухание или анимацию! Однако вы можете сделать это с помощью некоторых уловок.

Вы можете создать обычную CSS border пунктирной или точечной. Например:

Амит Шин построил этот действительно аккуратный генератор пунктирных границ:

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Хитрость заключается в использовании четырех разных фонов. Свойство background принимает значения, разделенные запятыми, поэтому, установив четыре фона (один вдоль верхней, правой, нижней и левой) и задав их размеры похожими на границе, оно разблокирует все это управление. Например, так:

background-image : repeating-linear-gradient ( 0deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px ) , repeating-linear-gradient ( 90deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px ) , repeating-linear-gradient ( 180deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px ) , repeating-linear-gradient ( 270deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px ) ;

Автор: Chris Coyier

Редакция: Команда webformyself.

Источник

How to Add a Border Around an Image with CSS

Sometimes, when building a web page, you want the image to look like it has a framed border like a photograph but without using a graphics program like Photoshop or Fireworks. This can easily be accomplished by using CSS (Cascading Style Sheets) to format the image, like in the photo shown here.

The benefit of using CSS is that you can change the border color, style and width along with other features on multiple images by just adjusting the CSS file, instead of editing each image individually. The following will show you how to add a frame or a border around an image with CSS. You can also add a caption under the image.

Frame an Image with a Colored Background

First you need to set up a class in your CSS file for the frame. I labeled this class «imgframe» but you can name it whatever you want. I set this one up with a pink background (the same color as the rose). You can use the eye dropper feature in your graphics program to pick up the hexadecimal color code. Then I added padding of 12 pixels and a gray 1 pixel border, but change those to fit your own needs. Add this to your CSS file:

If you are building a site set up for mobile then leave out the image height and width unless the image is already small enough to fit on a small mobiile device.

Add this «imgframe» class to your image tag in the html file:

This should result in an image with a frame or thin border like the following:

You can increase the width of the frame by adding more padding. You can change the color of the border and the background by altering the colors in the imgframe class.

Framed Image with a Transparent Background

The padding around the following frame or border is a bit thinner than the one above but you can make it wider by changing the padding. For a transparent background add the following to your CSS file (notice I changed the name of the class on this image):

Add this class (img-frame) to your image tag in html file:

This should produce an image with a transparent frame like this:

How to add a Drop Shadow Under the Image Frame or border

If you want to add a drop shadow add the following to your css file:

Being as an image is an inline element we will need to add «display:block;» to the image class in CSS otherwise there will be white space under the image frame or border, but before the drop shadow. So now your CSS file should have the following:

.img-frame <
display:block;
background:transparent;
padding:8px;
border:1px solid #ccc;
box-shadow:5px 5px 5px #999; >

Your image should now have a drop shadow on right and bottom sides, outside of the frame, like this:

For more information on drop shadows see the CSS Drop Shadows page.

How to Frame an image with a Caption

To add a caption to your image add the following to your CSS file:

Add this class to a div surrounding the image in the html file:

You also need to set up another class to format the text so the caption is centered under the image. I’ve added a margin of 4 pixels above the text so it’s not right under the image (you can format font style’s here also):

The resulting code for your html file should look like this:

This should result in an image with a frame and caption like the one below.

Calculating Padding Widths so It’s even on all Sides of the Image

I have set the frame width to the same width as the image (in this case it’s 200 pixels). The caption under the image takes up extra space within the frame. The font for this caption is 12 pixels high and I added a top margin of 4 pixels so it’s not right under the image. I added 2 pixel padding on the bottom of the text so it’s vertically centered within the bottom of the frame.

So we have 12 pixels for the font, plus 2 pixels padding on bottom, plus a 4 pixel margin on top of the text which equals 18 pixelsl. This is the amount we need to set for the top and sides of the frame. You’ll have to adjust the padding in a similar manner for your image so it’s even on all sides.

You can center or left or right align the frame div by setting up another div on the outside of this one and applying equal margins on both sides for center, or float:left, or float:right.

For more information about Lori’s Experience with Website Designing and Seo Audits please see the bio at the bottom of the Home Page.

Lori’s Web Design, Colfax WA., +1 509-397-6000
Email: Lori Eldridge
© 2000 — 2023
All Rights Reserved

Источник