I want to show the image in the background but it doesn't show:
<div class="jumbotron jumbotron-fluid background: url('/assets/img/mhacks.jpg') no-repeat center center;">
<div class="container text-sm-center p-t-3">
<h1 class="display-2">Mona Jalal</h1>
<p class="lead">Under construction</p>
</div>
</div>
What I see is:
P.S.: In general how can I debug such faults?
Here's my jsfiddle:
https://jsfiddle.net/e5qsnjdo/
With the following code:
<div class="jumbotron jumbotron-fluid style="background-image: url('/assets/img/mhacks.jpg') no-repeat center center;">
<div class="container text-sm-center p-t-3">
<h1 class="display-2">Mona Jalal</h1>
<p class="lead">Under construction</p>
</div>
</div>
I get these errors:
Move your background property to style attribute:
<div class="jumbotron jumbotron-fluid" style="background: url('/assets/img/mhacks.jpg') no-repeat center center;">
Or define in css as follows:
.jumbotron {
background: url('./assets/img/mhacks.jpg') no-repeat center center;
}
// notice the . before /assets if you don't use the . it will give the 404 error -
<div class="jumbotron jumbotron-fluid" style=" background: url('/assets/img/mhacks.jpg') no-repeat center center;">
<div class="container text-sm-center p-t-3">
<h1 class="display-2">Mona Jalal</h1>
<p class="lead">Under construction</p>
</div>
</div>
You could try this : change your CSS properties from background to background-image.
e.g. background-image: url("/assets/img/mhacks.jpg" ) cover no-repeat;
Related
i already found some questions regarding this topic but none of them could really help me solving my problem.
I like to build a simple Bootstrap grid looking like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-8"> Some Text </div>
<div class="col-sm-4">
<img src="..." alt="Full Size Background Image" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="..." alt="Full Size Background Image" />
</div>
<div class="col-sm-8"> Some Text </div>
</div>
</div>
The col-sm-4-DIVs should contain a full size background image with the same height as the text and no padding.
Here's a photo of what I mean. I want the background image to cover the red area:
See Example
Any ideas how to do that?
Thank you very much for your help!!!
First option, you can set min-width:100% in your img tag:
img {
min-width: 100%;
}
Or Second option, you can set the image as a background and set it in the div that you want:
<div class="col-sm-4 full-img">
And the css:
.full-img {
background-image: url("....");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
use css to set the background image on the column
<div class="row">
<div class="col-sm-4" style="background-image:url('.....')">
content......
</div>
I'm trying to get a background image or color in a CE element in Mask extension.
This is what I get as out-put but no image and no background color?
What Am I missing forgetting here? Seems all OK to me :)
<div id="c71" class="csc-default">
<section class="test_one" style="background-image: url('fileadmin/_processed_/c/6/csm_pizza_uit_de_kleine_pizzajolly_pizzaoven_campegio_eb7fa491f7.jpg') no-repeat center center; background-size: cover;">
<div class="row wrap">
<div class="large-12 small-12 columns">content</div>
</div>
</section>
</div>
</section>
this is in my template:
<f:if condition="{data.tx_mask_achtergrond_afbeelding}">
<f:then>
<f:for each="{data.tx_mask_achtergrond_afbeelding}" as="file">
<section class="<f:if condition="{data.tx_mask_class_name}">{data.tx_mask_class_name}</f:if>"
style="background-image: url('{f:uri.image(src: file.uid, treatIdAsReference: 1)}') no-repeat center center; {data.tx_mask_kleur_actergrond}; background-size: cover;">
<!-- if content CE than: -->
<div class="row wrap">
<div class="large-12 small-12 columns"><!-- content element here: text / button -->content</div>
</div>
</section>
</f:for>
</f:then>
<!-- if no background image than background-color and content CE-->
<f:else>
<section class="class-name"
style=background-color:"<f:if condition="{data.tx_mask_kleur_actergrond}">
{data.tx_mask_kleur_actergrond}
</f:if>
;">
<!-- if content CE than: -->
<div class="row wrap">
<div class="large-12 small-12 columns"><!-- content element here: text / button --></div>
</div>
</section>
</f:else>
</f:if>
<section class="test_one"
style="background-image: url('fileadmin/_processed_/c/6/csm_pizza_uit_de_kleine_pizzajolly_pizzaoven_campegio_eb7fa491f7.jpg')
no-repeat
center
center;
background-size: cover;">
do you want only set the background image or do you want to set also the formating and positioning of the background image?
You start with background-image: but set all paramters as for background:
How to fit image into bootstrap panel-body?
I am using img tag. I tried to do max-height:100% and max-width: 100% but no luck.
Is there any way to fit image to panel-body without specifying actual height and width.
following is my code:
<div class="jumbotron">
<div class="container" id="project_info">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">Medical Data Visualization</div>
<div class="panel-body">
<img src="resource/Medical_visualization.jpg" class="img-rounded" id="Panel_Image">
</div>
</div>
</div>
</div>
</div>
</div>
Thanks.........
You can use the img-responsive class of bootstrap
<div class="panel-body">
<img class="img-responsive" src="resource/Medical_visualization.jpg" class="img-rounded" id="Panel_Image">
</div>
Try,
.panel-body{
height: 100px;
background-image: url(your-image.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
also remove img tag. change the height as per req.
i recommend using image as inline background. I have created a snippet. please check
.panel-body {position: relative}
.panel-body .image-holder {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container" id="project_info">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">Medical Data Visualization</div>
<div class="panel-body">
<div class="image-holder" style="background: url(http://weknowyourdreams.com/images/nature/nature-02.jpg)"></div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to keep a main banner on my page the same height as the browser window shrinks. I would like the left / right sides to end up being cut off and the banner to always focus on the center of the image.
http://jsfiddle.net/ab4p4aaj/
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12" id="home">
<img src="http://www.lightswitchcreative.ca/_images/mainslide.jpg" alt="" class="img-responsive" id="mainslide" />
</div>
</div>
Replace your image by a div:
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12" id="home">
<div id="mainslider"></div>
</div>
</div>
</div>
And add the image as background using background-size: cover
#mainslider {
height: 200px;
width: 100%;
background: url(http://www.lightswitchcreative.ca/_images/mainslide.jpg) center no-repeat;
background-size: cover;
}
Here is a JSFIDDLE
I don't know if it is possible or not .
I'm using bootstrap and i want to assign to the class container-fluid two background color. 50% black and the other 50% red;
<div class="container-fluid bg-footer-text">
<div class="container">
<div class="col-md-5 left-text">
asdasdsdasd
</div>
<div class="col-md-7 right-text">
<div>
<img src="<?php echo Yii::app()->createUrl("/images/pages/services/img_servicii_qa_1.jpg") ?>" alt="Development" />
</div>
<div class="content">
asdsada
</div>
</div>
</div>
</div>
How can i do that? thx
UPDATE
I don't care what color will have the container class
Yes, it is possible using a linear gradient background.
JSfiddle Backup Demo
.container-fluid {
width: 80%;
margin: 0 auto;
height: 500px;
background-image: linear-gradient(to right, black, black 50%, red 50%, red);
}
<div class="container-fluid"></div>