TYPO3 Mask CE background image - css

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:

Related

Full size background image for col-*-* in Bootstrap

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>

Image out of the container

<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content"></div>
</div>
</div>
</div>
I do not have a definite css yet, I still think how I can do this
How can I make the image full width inside a container, just like in the example using bootstrap, The black border is the bootstrap container
What I try to do is the content in a container and the image outside of that container,
Just set these properties--
.imagen img{
width: 100%;
max-width: 100%;
}
Here you go with jsfiddle https://jsfiddle.net/9drawa3h/1/.
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content">
<img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2013/04/13/how-to-do-free-online-background-check/_jcr_content/par/featured-media/media-1.img.jpg/876/493/1422493303787.jpg?ve=1&tl=1" />
</div>
</div>
</div>
</div>
I know you are looking for text-content in the second column, but I specified something else.
As I not sure whether you are going to use img tag ro background-image in the 1st column, so I have provided both.
1st Column with background-image and 2nd column with img tag.

Bootstrap: change background color

I'm new to learning Bootstrap and I'm looking have 2 col-md-6 divs next to one another having one background-color blue and the other white. How can I change one background color and not both?
I'm trying to get a look similar to below the full width photo on this website. Minus the image on the left. I just want a block white and a block blue. http://tympanus.net/Freebies/Boxify/
CSS
.bg-primary {
background-color: #1a52c6;
}
HTML
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="col-md-6">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
<div class="col-md-6 blue">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
</div>
</div>
</div>
You can target that div from your stylesheet in a number of ways.
Simply use
.col-md-6:first-child {
background-color: blue;
}
Another way is to assign a class to one div and then apply the style to that class.
<div class="col-md-6 blue"></div>
.blue {
background-color: blue;
}
There are also inline styles.
<div class="col-md-6" style="background-color: blue"></div>
Your example code works fine to me. I'm not sure if I undestand what you intend to do, but if you want a blue background on the second div just remove the bg-primary class from the section and add you custom class to the div.
.blue {
background-color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="about">
<div class="container">
<div class="row">
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="col-xs-6">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
<div class="col-xs-6 blue">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
</div>
</div>
</section>
You could hard code it.
<div class="col-md-6" style="background-color:blue;">
</div>
<div class="col-md-6" style="background-color:white;">
</div>
Not Bootstrap specific really... You can use inline styles or define a custom class to specify the desired "background-color".
On the other hand, Bootstrap does have a few built in background colors that have semantic meaning like "bg-success" (green) and "bg-danger" (red).

jumbotron background image doesn't show

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;

Keep responsive image same height and centered within image

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

Resources