.outer{ width: 300px; height: 300px; position: relative; } .outer > .inner{ background: rgba(0,0,0,0.9); color: #fff; position: absolute; padding: 10px; right: 0; bottom: 0; left: 0; z-index:1; } <div class=”outer” style=”background:url(http://lorempixel.com/600/300/)center center no-repeat;background-size:cover”> <div class=”inner”>Some text here</div></div> 0 solved How can i do this in css/html?
You can use this code: $(function() { $(“.img-w”).each(function() { $(this).wrap(“<div class=”img-c”></div>”) let imgSrc = $(this).find(“img”).attr(“src”); $(this).css(‘background-image’, ‘url(‘ + imgSrc + ‘)’); }) $(“.img-c”).click(function() { let w = $(this).outerWidth() let h = $(this).outerHeight() let x = $(this).offset().left let y = $(this).offset().top $(“.active”).not($(this)).remove() let copy = $(this).clone(); copy.insertAfter($(this)).height(h).width(w).delay(500).addClass(“active”) $(“.active”).css(‘top’, y – 8); $(“.active”).css(‘left’, x – 8); setTimeout(function() … Read more
When you use class instead of id then you can do something like this. Get all the hello elements Create a random Index in the range from zero to the length of your elements Set the style.color of this random Index element in your helloElements to red let helloElements = document.querySelectorAll(“.hello”); let ind = (Math.floor(Math.random() … Read more
That style rule could be from a style sheet in Shadow DOM or a constructible stylesheet. solved Can’t find style in html but can find in styleSheets
You can use bootstrap col-12 class or just use a simple div to make it full width everywhere. Here is the working example using bootstrap col-12 class: .col-12 { background-color: #dedede; } .content { background-color: #abaaba; } <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”> <div class=”container-fluid”> <div class=”row”> <div class=”col-12″> <h1>Welcome back User!</h1> </div> </div> </div> <!– … Read more
There must be some problem with import or routing or may be you must’ve imported other blank component that’s causing gap betweem navbar and home components. solved A huge gap between navbar component and home component [closed]
Even if the inner content it’s not an image, in both case you could use <figure> and <figcaption>, e.g. Codepen demo Markup <figure aria-labelledby=”figure-1-1″ class=”f1″> <figcaption id=”figure-1-1″>Title of the figure</figcaption> … </figure> <figure aria-labelledby=”figure-1-2″ class=”f2″> <figcaption id=”figure-1-2″>Title of the figure</figcaption> … </figure> CSS .f1, .f2 { border: 1px #9bc solid; position: relative; border-radius: 5px; min-height: … Read more
I’ll use CCS Grid, but the comment from S Grimminck worked for what I was trying to achieve. Down voters are absolutely no help at all. solved Align Button to bottom of Flexbox Container
The code is not related to Tic-Tac-Toe. This is general JavaScript code. Not Specific. All this do is check whether a document.all is present and whether getElementById function is present or not. Which is true for present World. document.all list all elements and document.getElementById is a function which return the element with id that match … Read more
You’re looking for a Masonry layout library. I’ve used this one in the past with good results (it’s a jQuery plugin, so jQuery required). http://yconst.com/web/freetile/ solved Javascript grid gallery [closed]
Try this approach. Main points of design are: keep height 100% only on html & body tags most elements use bootstrap’s .flex-fill to fit in content fully within viewport and .flex-column to span across the page vertically. this helps control vertical alignment blue background (.bg-info) is left so that you can see how content expands … Read more
It doesn’t work because the javascript is loaded and executed while the page loads and mounts. So the DOM objects you are trying to use don’t yet exist. What you have to do? You have to run this code right after the page loads. You can do this by adding onload event in body tag. … Read more
Bootstrap is including the style img { max-width: 100%; }. In most cases, this is what you want… images larger than the viewable area will be scaled to fit. To override, use the value none. You should try to target just the image that you want to be the full width by adding a new … Read more
You can use line-clamp. This will truncate the amount of lines shown based on the value of -webkit-line-clamp .line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } Browser support for this is good, apart from the usual lagger IE11. Find a full guide on how to use this on CSS Tricks. Other solutions … Read more
You will need to use some translateX and left for the dropdown ul and also set position:relative to the parent li * { margin: 0; padding: 0; } #track-nav { margin-left: 50px; margin-top: 50px; float: left; width: 100%; list-style: none; font-weight: bold; margin-bottom: 10px; } #track-nav li { position: relative; padding-bottom: 15px; float: left; margin-right: … Read more