I want to conceal column that col-md-0 in my screen on md size.
But It shows my screen . How can I hide that?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
is exist in my <head>tag
<div class="container-fluid top-nav">
<div class="row">
<div class="hidden-xs hidden-sm col-md-1 left-fixed-bar">
나왔다가 숨겨질 부분.
</div>
<div class="col-xs-1 col-sm-1 hidden-md left-fixed-bar">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<!-- End of left part -->
<div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
나왔다가 숨겨질 부분.
</div>
<div class="col-xs-9 col-sm-9 hidden-md">
숨겨져있다 나올 부분
</div>
<!-- End of center part -->
<div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<!-- End of right part -->
</div>
</div>
Actually there is no class such as col-md-0 for your purpose you wll need to write a media query and set width: 0%; on the medium screen resolution. or you can use the hidden-md class for your requirement. Which will hide your div im medium resolution. I have attached the code spinet for you.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid top-nav">
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 left-fixed-bar">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
EMPTY
</div>
<div class="col-xs-9 col-sm-9 hidden-md">
TITLE
</div>
<div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid top-nav">
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 left-fixed-bar">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
EMPTY
</div>
<div class="col-xs-9 col-sm-9 hidden-md">
TITLE
</div>
<div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
Related
With the reference to the subject, I cannot put each object which should be bracketed by the i tag. I would like to align it side by side. However I used a li tag and float:left and right on CSS, it was not changed. Does anyone know how to change the position?
<section id="mypassion-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="img/logo.png" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
<h3>生徒さんの成長</h3>
<p>OOOOO様 <br>受講前</p>
<i class="fa fa-play icon-left" aria-hidden="true"></i>
<p>受講後</p>
<i class="fa fa-play icon-right" aria-hidden="true"></i>
</div>
I used bootstrap classes to align items without changing much in DOM. Please check on the link to get more knowledge on Bootstrap Classes.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section id="mypassion-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="https://via.placeholder.com/100x100.png?text=Logo" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
<h3>生徒さんの成長</h3>
<p>OOOOO様 <br>受講前</p>
<div class="d-flex align-items-center justify-content-center">
<i class="fa fa-play fa-rotate-180 icon-left" style="margin-right: 1rem;" aria-hidden="false"></i>
<p class="mb-0">受講後</p>
<i class="fa fa-play icon-right" style="margin-left: 1rem;" aria-hidden="false"></i>
</div>
</div>
</div>
</div>
</section>
Was there a reason you didn’t want to put the icons in the p tag?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section id="mypassion-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="https://via.placeholder.com/100x100.png?text=Logo" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
<h3>生徒さんの成長</h3>
<p>OOOOO様 <br>受講前</p>
<p><i class="fa fa-play fa-rotate-180 icon-left" style="margin-right: 1rem;" aria-hidden="false"></i>
受講後
<i class="fa fa-play icon-right" style="margin-left: 1rem;" aria-hidden="false"></i></p>
</div>
</div>
</div>
</section>
It was good that you included some code in your question, but it's better to use the snippet tool to include things like the Bootstrap and Font Awesome CSS files and to provide a running example of what you have so far.
<div class="col-xs-12" style="padding:0px">
<div class="col-xs-6 pull-left">
<div class="col-xs-12"><strong>Cooking Details</strong></div>
<div class="col-xs-12">
<span class="col-xs-6 pull-left">Ingredient</span>
<span class="pull-right col-xs-6 " style="padding-right:0px">Quantity</span>
</div>
<div>
<div>
Pull-right works fine for cooking details line, but for ingredient and quantity I am unable to format it with pull-right/float: right.
I am expecting quantity to be at the end of the div it is in. It is getting the 50% width but float:right is not working
Bootstrap 3: https://www.codeply.com/p/OSJMu17P9a
<div class="col-xs-12" style="padding:0px">
<div class="col-xs-12"><strong>Cooking Details</strong></div>
<div class="col-xs-6">
<span class="pull-left">Ingredient</span>
<span class="pull-right" style="padding-right:0px">Quantity</span>
</div>
</div>
Bootstrap 4: https://www.codeply.com/p/BrGeGl9mZi#
<div class="col-12" style="padding:0px">
<div class="col-12"><strong>Cooking Details</strong></div>
<div class="col-6">
<span class="float-left">Ingredient</span>
<span class="float-right" style="padding-right:0px">Quantity</span>
</div>
</div>
I'm not sure if you wanted something like this. When you add the col you have to use a div with row class a wrapper
#EDITED: WAY BETTER SOLUTION
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<div style="padding: 0px;">
<h4>
<strong>Cooking Details</strong>
</h4>
<div>
<span class="pull-left">Ingredient</span>
<span class="pull-right">Quantity</span>
</div>
</div>
Or Bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div>
<h4>
<strong>Cooking Details</strong>
</h4>
<div>
<span class="float-left">Ingredient</span>
<span class="float-right">Quantity</span>
</div>
</div>
With this, I want to achieve stacked columns on mobile devices, but I run on a problem here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row border-top border-bottom border-info">
<div class="col-lg-1 col-md-1 col-sm-1 col-12 my-1 sortable position-relative">
<a class="position-absolute" href="#">rb</a>
</div>
<div class="col-12 col-sm-11 col-md-11 col-lg-3 my-1 sortable position-relative">
<a class="position-absolute" href="#">folder</a>
</div>
<div class="col-6 col-sm-3 col-md-3 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">modtime</a>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 my-1 ">
img
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">width</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">height</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">filesize</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">linked</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1">
delete?
</div>
</div>
</div>
</body>
</html>
where you can see that the first two columns are overlapped without any particular reason. Why?
Thanks,
Dejan
UPDATE
as was mentioned down bellow, positioning was causing the problem, thanks all for contributing
You can use with col class only for that don't put extra CSS class on it. It will create a problem here is what u want without overlapping to each other simply use this code
<div class="container">
<div class="row border-top border-bottom border-info">
<div class="col">
rb
</div>
<div class="col">
folder
</div>
<div class="col">
modtime
</div>
<div class="col">
<p>
img
</p>
</div>
<div class="col">
width
</div>
<div class="col">
height
</div>
<div class="col">
filesize
</div>
<div class="col">
linked
</div>
<div class="col">
<p>
delete?
</p>
</div>
</div>
</div>
</body>
if u want on navbar then simply use this code
<nav class="navbar navbar-expand-md navbar-light bg-light">
Brand
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
rb
folder
modtime
img
width
height
<a href="#" class="nav-item nav-link" tabindex="-1">
filesize</a>
linked
delete?
</div>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row border-top border-bottom border-info">
<div class="col">
rb
</div>
<div class="col">
folder
</div>
<div class="col">
modtime
</div>
<div class="col">
<p>
img
</p>
</div>
<div class="col">
width
</div>
<div class="col">
height
</div>
<div class="col">
filesize
</div>
<div class="col">
linked
</div>
<div class="col">
<p>
delete?
</p>
</div>
</div>
<br><br>
<nav class="navbar navbar-expand-md navbar-light bg-light">
Brand
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
rb
folder
modtime
img
width
height
<a href="#" class="nav-item nav-link" tabindex="-1">
filesize</a>
linked
delete?
</div>
</div>
</nav>
</div>
</body>
</html>
Edit or preview Here
More about Bootstrap 4 Grid System Here
More about Bootstrap 4 Navbar Code and Example Here
I trying to update my website and would like to have two jumbotrons side by side but they keep rendering in stack position?? What am I missing?
borrowed code from another thread:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="container">
<div class="jumbotron text-center col-md-6">
<h1>Become Awesome</h1>
<p>Here you will learn how to become awesome.</p>
<a class="btn btn-danger pull-right" href="{% url
'awesome_info' %}">More Info</a>
</div>
<div class="jumbotron text-center col-md-6">
<h1>Here you will learn how to become super rad.</h1>
<p>Tubular dude.</p>
<a class="btn btn-success" href="{% url 'rad_info' %}"
role="button">More Info</a>
</div>
</div>
</div>
Need to change your markup.
Open snippet in full-screen
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="jumbotron text-center">
<h1>Become Awesome</h1>
<p>Here you will learn how to become awesome.</p>
<a class="btn btn-danger pull-right" href="{% url
'awesome_info' %}">More Info</a> </div>
</div>
<div class="col-md-6 col-sm-6">
<div class="jumbotron text-center">
<h1>Here you will learn how to become super rad.</h1>
<p>Tubular dude.</p>
<a class="btn btn-success" href="{% url 'rad_info' %}"
role="button">More Info</a> </div>
</div>
</div>
</div>
The header is all effed: How do I get this smartcat.png image to be the entire background for the header only?
I am hoping to add the answer to my stylesheet "cat.css" .
I appreciate all suggestions and better practices for coding with bootstrap.
Here is the website:
http://chillcastle.com/cat/felinedelirium
Here is my stylesheet:
.header-content {background: url("img/smartcat.png");}
.header {background: url("img/smartcat.png");}
Here is the webpage code:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Feline Delirium</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/creative.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="www.chillcreatives.com">
<span class="sr-only">Poop</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Felines</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">Cat Tales</a>
</li>
<li>
<a class="page-scroll" href="#services">Cat News</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Cat Life</a>
</li>
<li>
<a class="page-scroll" href="#contact">Cat Stuff</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Kitty Cats</h1>
<hr>
<p>Feline Delirium is a fun thing.</p>
Find Out More
</div>
</div>
</header>
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Cats</h2>
<hr class="light">
<p class="text-faded">Whoa. Cats.</p>
Get Started!
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">BIJOUXXX</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-diamond text-primary sr-icons"></i>
<h3>Sturdy Templates</h3>
<p class="text-muted">Cats!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i>
<h3>Ready to Ship</h3>
<p class="text-muted">You can use this theme as is, or you can make changes!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-newspaper-o text-primary sr-icons"></i>
<h3>Up to Date</h3>
<p class="text-muted">We update dependencies to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-heart text-primary sr-icons"></i>
<h3>Made with Love</h3>
<p class="text-muted">You have to make your websites with love these days!</p>
</div>
</div>
</div>
</div>
</section>
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter popup-gallery">
<div class="col-lg-4 col-sm-6">
<a href="img/cubecat.png" class="portfolio-box">
<img src="img/cubecat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/smartcat.png" class="portfolio-box">
<img src="img/smartcat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/goldencat.png" class="portfolio-box">
<img src="img/goldencat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="smokincat.jpg" class="portfolio-box">
<img src="img/smokingcat.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/5.jpg" class="portfolio-box">
<img src="img/" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/6.jpg" class="portfolio-box">
<img src="img/portfolio/thumbnails/6.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<aside class="bg-dark">
<div class="container text-center">
<div class="call-to-action">
<h2>Bijouxxx</h2>
cats!
</div>
</div>
</aside>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p>Hit us up with your cat pic</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p>123-456-6789</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p><a href="the chill castle # gmail.com >feedback#startbootstrap.com</a></p>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/creative.min.js"></script>
The aspect ratio of the cat picture compared to the header is way different. You could crop the image in height a little bit to help it fit.
After which you can use this code to get it scale to cover the entire header. You will need to mess around with the css position and the size of the cat image to see what works for you.
.header-content {
background: url(img/smartcat.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's the article link for a full width background image - https://css-tricks.com/perfect-full-page-background-image/
Happy coding!
Added Note
The header is very thin and currently has an approximate aspect ratio of 7:1. Which basically means in order to maintain aspect ratio ,every one increase in height will cause a 7 times increase in width. So if you double the height, the width will be 14 (i.e 14:2)
Now your image on the other hand has an aspect ratio of 25:24.
So imagine that you're trying to fit a square box inside a thin horizontal line. Not really going to fit without distorting the image.
So you basically have three options.
Change background-size:cover to background-size:contain. This will basically make the height of the image the same as the parent so that the whole image appears without breaking the ratio. Basically it will make sure your whole image is displayed in the container. But this also means that your container will not get fully covered by the image. Here is an example of option 1 . http://i.imgur.com/GxcF4aO.jpg?1
Keep background-size:cover and adjust the aspect ratio of the image to be more like the header. i.e. Crop the image in height.
Here is an example of a cropped image. http://i.imgur.com/GNEZq4U.jpg?1
Keep everything the way it is and increase the height of the header to match the image.
Here's a link to show how aspect ratio works. You can toggle the How to handle ratio mismatches radio buttons at the bottom to check the difference between options 1 and 2.
http://andrew.hedges.name/experiments/aspect_ratio/ Make sure you have the show sample image button checked. Enter the dimensions of the header and either the height or the width of the image to find out what ratio the image should be.
Hope this helps.