I am a pega developer never spend a lot of time in working on webpage.I want to create a pdf .In Pega that will be created from a html page.i need to keep the wate mark draft as background?
I tried following code but when im including it in my code it is creating as separate div and next divs are coming on the next page?and also the draft is not coming in the background middle ?`
<div style="position:absolute;z-index:0;background:white;display:block;min-height:50%; min-width:50%;color:yellow;">
<p style="color:steelblue;font-size:120px;">DRAFT</p>
</div>
`
This is another way. hope this helps
div{
position: relative;
z-index: 0;
background: white;
display: block;
min-height: 40%;
min-width: 100%;
color: yellow;
border: 2px solid black;
height: 200px;
}
p{margin:0}
div:after{
content: "DRAFT";
color: steelblue;
font-size: 120px;
/* text-align: center; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity:0.1
}
<div >
</div>
Try setting a background-image in the CSS
body {
background-image: url('https://example.com/image.jpg');
}
or in the HTML as so
<body style="background-image: url('https://example.com/image.jpg');">
Use CSS to give the body the background:
body{
background-image: url('../watermark.png');
background-size: contain; /* Make background take entire page */
background-position: center; /* Center Background */
}
Related
I can't seem to specify the color on the header for my website.
The code is here:
.header {
height: 95vh;
background-size: cover;
background-position: top;
position: relative;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
&__logo-box {
position: absolute;
top: 4rem;
left: 4rem;
z-index: 4;
}
&__logo {
height: 35px;
transform: scale(1.5);
z-index: 4;
}
&__text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 5;
}
}
.video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
object-fit: cover;
}
.gradient {
background: linear-gradient(
90deg,
rgba(30, 95, 156, 1) 1%,
rgba(16, 55, 130, 0.2637429971988795) 100%
);
z-index: 2;
min-width: 100%;
min-height: 100%;
height: calc(100vh - 80px);
object-fit: cover;
position: relative;
}
.hor-nav{
position: fixed;
top: 40px;
right: 40px;
height: 50px;
z-index: 20;
color: $color-white;
}
ul{
list-style-type: none;
color:$color-white;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header-bg{
background-color:#2998ff;
}
<header class="header">
<div class="gradient">
</div>
<video autoplay muted loop class="video">
<source src="img/bg-video.mp4" type="video/mp4" />
</video>
<div class="header-bg">
<div class="header__logo-box">
<img src="http://logos.xmltv.se/en.tlc.discovery.dk.png" alt="logo" class="header__logo" />
</div>
<div class="hor-nav">
<ul>
<li>Home</li>
<li>About </li>
<li>Invest</li>
<li>Insights</li>
<li>Technology</li>
<li>Performance</li>
<li>Education</li>
</ul>
</div></div>
</header>
I want to put the background color of #2998ff; to my header The background needs to be placed behind the navigation and the logo.
I've tried putting it in one div .header-bg and it still dosen't seem to work the way I want it to work.
<div style="background-color:#2998ff;"></div>
You should try something like this
Sometimes style definitions can overlap others. Try using !important at the end of the background-color declaration.
There's a few things going on.
browser web tools
All of these can be expiremented and tested in real time by using right click -> inspect element, or open web dev tools. If you're doing anything with web developement, they are insanely useful. Learn how to use them.
Invalid CSS
& is not a valid operator in CSS. If you're using a pre-processor like LESS, you need to run it to output CSS the browser can understand.
&__logo-box {
position: absolute;
top: 4rem;
left: 4rem;
z-index: 4;
}
Which CSS Selector do you want?
If you want to select all <header> elements, you would use
header {
background-color: red;
}
If you want anyone with the class name header use:
.header {
background-color: red;
}
If you want only one specific element that has the ID of header, use:
#header {
background-color: red;
}
If you want any div that's a child of header:
header div {
background-color: red;
}
Search for "css tutorials" and the word "selectors" for more info.
css overwriting?
Sometimes style definitions can overlap others
It's not this case of overwiting this time. Check your webpage with browser's DOM inspector / web tools. The header background is being set if you use the header selector. Select the element you want, to see all of it's computed CSS properties.
There's overlapping divs with transparency, making it harder to tell. Set all elements to a solid background color, to see. You'll probably need to add padding or margin to see them. Otherwise, the header div covers your header.
Mentioned above inline CSS
You do not want inline CSS, like this:
<div style="background-color:#2998ff"></div>
That will increase filesize and makes it harder to mantain code. It's a lot more work to make any change. Instead, use the right combinations of selectors. You can use heirarchy (like the first <p> element inside a <header>), or by classes, or by Ids. You can use multiple css classes on a single element. (I can't tell from the markup what you are expecting. You're probably overcomplicating the layout.
So, I have an image and I want to display in the center of it some text.
Code:
.img {
position: relative;
}
.img h3 {
position: absolute;
width: 100%
top: 85px;
text-align: center;
}
Ok, so I managed to do it. But here is the thing: when I resize my browser and the image becomes smaller, the text is going out of the image.
So my question is, do I have to use the #media rule for all the different dimensions? And how do I know which dimensions to use in my CSS?
Or is there maybe something I can do so my text element always stays inside the image?
Thank you in advance.
You have a bunch of different options you can make use of, each with its pros & cons and with a difference in browser support:
1. Flexbox: (support)
Flexbox is the simplest option you have, without using tables or having to get your elements out of the document flow, but it's not as widely supported as other viable options. I trust it will be soon enough.
Code:
/* --- CSS --- */
.background {
height: 10em;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
font-family: sans-serif;
}
<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
2. Line-height: (support)
When using this option, you have to ensure that:
the line height of the title is equal to the container's height and
the title is an one-liner.
(view note #2)
Code:
/* --- CSS --- */
.background {
height: 10em;
text-align: center;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
margin: 0 auto;
font-family: sans-serif;
line-height: 5em; /* container height / 2 */
}
<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
3. Position: Absolute & Transform: (support)
This is probably the overall most used method as it is widely enough supported, but it has the disadvantage that gets the element (title) off the normal flow.
Code:
/* --- CSS --- */
.background {
height: 10em;
position: relative;
background-size: cover;
background-position: center;
}
.background > h4 {
top: 50%;
left: 50%;
margin: 0;
color: #000;
font-size: 2em;
position: absolute;
font-family: sans-serif;
transform: translate(-50%, -50%);
}
<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
4. Table (support)
Well, I will likely be lynched, if anybody finds this out, but you can use display: table for the container and display: table-cell for the title to take advantage of the aligning of tables.
You can now center your title:
horizontally, by using text-align: center and
vertically, by using vertical-align: middle
Code:
/* --- CSS --- */
.background {
width: 100%;
height: 10em;
display: table;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
text-align: center;
display: table-cell;
vertical-align: middle;
font-family: sans-serif;
}
<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
Notes:
Since we are using an empty div for our image the height must be explicitly defined at all times.
Using line-height to center an element vertically requires that the line-height is equal to the height of the parent. In this case, 50% of the parent height is used, due to the fact that the font-size of the title is 2x the font-size of the parent and its also expressed in ems.
With regard to the #media query you made mention of, it should not be used for simple stuff like centering text, but rather for showing/hiding elements based on screen size etc.
If you care about the portability of your website to smaller screens, my advice is to avoid using px (pixels), but instead use % (percentages) that will update based on the screen or em (ems) by manually updating the font-size of the container using a #media query.
Use top: 50%;, left: 50%; and transform: translate(-50%, -50%);.
Really common trick these days with excellent browser support. Important to note, you need to specify some sort of height for .img for the inner element to be positioned properly. In this example, I used a vh unit for height to show how responsive it really is. Resize away.
I also prefer to use a background-image for things like this because it makes the markup so much easier. You're either going to want to use background-image or include the <img> tag inside div.img.
.img {
position: relative;
width: 100%;
height: 50vh;
background: #ccc;
background-image: url('https://images.unsplash.com/photo-1474693220100-7cddec4346f6?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=');
background-size: cover;
background-position: 50% 50%;
}
.img h3 {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: 0 auto;
transform: translate(-50%,-50%);
font-family: sans-serif;
color: white;
font-size: 26px;
}
<div class="img">
<h3>Hello, world!</h3>
</div>
Don't use media query for centering text each time you resize the screen. The solution below will work.
CSS
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
HTML
<div class="container">
<img src="" >
<div class="center">Centered</div>
</div>
/* --- CSS --- */
.background {
height: 10em;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
font-family: sans-serif;
display: none;
}
.background:hover {
display: block;
}
<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
I have 2 divs. Right div is an image cutted diagonally. Left divs must have some text inside. I want this to be fully responsive like this:
The problem occurs when I change window size, it's collapsing like in the image:
.
Also there is a text on left div that need to be displayed, but with flex this seems not to work so i disabled it. Please provide solution for this.
Here is my css and html:
#diagonal {
display: flex;
width: 100%;
}
#diagonal #ct-about-col-left {
width: 60%;
border-right: 190px solid transparent;
border-bottom: 500px solid grey;
z-index: 2;
}
#diagonal span {
display: none;
}
#ct-about-col-right {
height: 500px;
width: 50%;
border: 2px solid;
background-image: url(images/content/about/right-col-image.jpg);
z-index: 0;
margin-left: -12%;
margin-right: 0;
}
}
<div id="diagonal">
<div id="ct-about-col-left">
<span>We are the best</span>
<span>text1 text1 text1</span>
<span>Text2 text2 text2 text2</span>
<div>
<span>Read more</span>
</div>
</div>
<div id="ct-about-col-right"></div>
</div>
Maybe consider a slightly different mark-up and method of adding the picture (as a background-image) and making the angle (with transform: skew).
Live Demo: http://codepen.io/anon/pen/rjyKRo
<div class="container">
<div class="caption">
<p>CONTENT</p>
</div>
</div>
* { box-sizing: border-box; }
.container {
width: 100%;
height: 50vh;
overflow: hidden;
background-image: url("http://unsplash.it/600");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 50%;
}
.caption {
height: 100%;
width: 50%;
min-width: 500px;
padding-top: 20%;
padding-left: 130px;
background-color: #ddd;
transform: skew(10deg, 0deg);
transform-origin: 100% 100%;
}
.caption p {
transform: skew(-10deg, 0deg);
}
May I suggest another approach which will save You some markup space and CSS rules as well.
Simply create a full-width div with the ID of lets say ct-about, give it a background color grey and then simply chain the image background on top of the color like so:
background: url('images/content/about/right-col-image.jpg') no-repeat right top, grey;
This simply tells the browser, make my box grey and put that image over the grey color. The no-repeat right top properties are preventing the browser from repeating the image so you don't get a tile, tell ti to place the image on the far right and top positions.
This way everything will be responsive as well.
Here is a Fiddle for You to better understand.
You can find more information about multiple CSS backgrounds in the Mozilla Developer Network
I think this question is related to Link not working inside floated div but I still can't figure it out.
I have a div as follows:
.fullwidthimage {
width: 100%;
position: relative;
z-index: -1;
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 1;
top: 15px;
width: 100%;
}
#homepagebutton {
position: absolute;
text-align: center;
z-index: 100;
bottom: 50px;
width: 200px;
height: 60px;
left: 50%;
margin-left: -100px;
font-size: 25px;
border: 1px solid black;
border-radius: 5px;
background-color: orange;
color: black;
text-decoration: none;
}
<div class="fullwidthimage">
<img class="noround imageundertext smallimg" src="http://placehold.it/600x800">
<img class="noround imageundertext midimg" src="http://placehold.it/1000x1000">
<img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300">
<img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500">
<h1 class="imageoverlay">Title Here</h1>
Get Started
</div>
The different images are using a CSS media query to display/hide at different sizes. The whole thing is a full width image with a text title and 'button' (that's actually just a link styled to look like a button) over the top of the image.
Whatever links I put inside that div won't work - the text shows on the page, but nothing happens if you mouse over.
Why?!
Links placed immediately outside of the div on the same page work just fine, so I don't think it's anything to do with other containing divs there.
I'm assuming from that previous question asked that it's something to do with the positioning, but I can't make it work.
Thanks!
If you give a -1 in z-index, it goes behind body. So the whole div.fullwidthimage becomes unclickable or unaccessible. So, give z-index: 1 as the starting point.
.fullwidthimage {
width: 100%;
position: relative;
z-index: 1; /* Change this! */
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 2; /* Increase this! */
top: 15px;
width: 100%;
}
In my application I have a section header with a caption and a horizontal line. The horizontal line is a background image (which contains the line, the rest of the image is transparent) of the parent container. The caption is defined by a child element.
<div class="header">
<span>Identifier</span>
</div>
What I am trying to achieve - with CSS styling - is that the child element is displayed with the same background color as the parent, but the background image of the parent container should not be displayed underneath the caption.
.header {
background-image: url("bg_image.png");
background-color: #fff;
position: relative;
height: 25px;
}
.header > span {
position: absolute;
background-color: #fff;
padding: 0px 10px;
}
This works perfectly if I set the background color of the child element explicitly. But the background color can be configured by the user, so I don't want to set it explicitly.
So my the question is, is this possible at all using only CSS styling?
This fiddle shows the problem (I used a gradient to simulate the background image).
EDIT: An important requirement is that the solution must work across browsers (including IE8).
If you're okay with a centered headline, try the css that i used in one of my projects:
h1 {
position: relative;
white-space: nowrap;
text-align: center;
padding: .2em 0;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 2px;
vertical-align: middle;
background: #000;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
You can see the result here: http://codepen.io/DerZyklop/pen/AouDn
It is pure CSS. It adds two lines by using the css-pseudo-elements :before and :after.
With some modifications it should also work well with a left-aligned headline like in your example.
And another important thing to note here is the white-space: nowrap;. So this will only work with one line, but not with multiple lines.
can you please checkout
http://jsfiddle.net/dYr29/3/
i have update your fiddle
<div class="header">
<span>Identifier</span>
</div>
css
.header {
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background-color: #fff;
position: relative;
width: 300px;
height: 1px;
top: 10px;
}
.header > span {
position: absolute;
padding: 0px 10px;
top: -10px;
left: 10px;
background:#fff;
}
I finally identified how to solve the problem.
.header > span {
position: absolute;
background-color: inherit;
padding: 0px 10px;
}
Using background-color: inherit will solve the problem.
I also updated the fiddle.