CODEWITHSUNDEEP
htmlcss
Martin Beentjes
Martin Beentjes

Reputation: 132

Set minimal width of a image which may not overflow

I am working on a webpage which contains an header logo. This logo has two logo's in it: one with a transparent background and one with a orange background on the right. The image is like 3.000 pixels wide. I want to resize the image to let both logo's fit in the div horizontally. So that on every device I will see the logo's and a part of the orange background (what makes the image that long.

HTML

<div class="logo-header"><img src="logo.png"></div>

CSS

.logo-header {
    overflow: hidden;
}

It indeed overflows nicely as I would want it, but when I use an iPhone 4 or some other small screen I am failing to get it have a minimal width.

Is this possible in CSS or is this something I should do with Javascript?

Upvotes: 0

Views: 56

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28563

.logo-header {
  background-image: url("http://bighugelabs.com/img/nbcam/ribbon_3000_bg_sh.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 20vh;
  width: auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="logo-header">&nbsp;</div>
</body>

</html>

if you check this image it's 3000px wide.

First of all, i recommend you optimise your image (try tinypng.com) and resize it using paint or some such (rezize before you optimize).

then use background cover and set it as a background image

Upvotes: 1

oliverpool
oliverpool

Reputation: 1671

Maybe you can try to split your image in two images.

With CSS, you then insert the second image (with orange background) as background-image of .logo-header, aligned to the right.

Upvotes: 0

Related Questions